React Development with the Shards React Library — Input Groups, List Groups, and Modals

Shards React is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

Input Group Size

We can change the size of an input group with the size prop:

import React from "react";
import {
  InputGroup,
  InputGroupText,
  InputGroupAddon,
  FormInput
} from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <InputGroup size="sm">
        <InputGroupAddon type="prepend">
          <InputGroupText>Total Amount</InputGroupText>
        </InputGroupAddon>
        <FormInput style={{ height: 35 }} />
        <InputGroupAddon type="append">
          <InputGroupText>$ (USD)</InputGroupText>
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
}

sm changes the size to small.

lg changes the size to large.

Seamless Input Groups

We can add an input group addon without borders with the seamless prop.

For instance, we can write:

import React from "react";
import {
  InputGroup,
  InputGroupText,
  InputGroupAddon,
  FormInput
} from "shards-react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCoffee } from "@fortawesome/free-solid-svg-icons";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <InputGroup seamless>
        <InputGroupAddon type="prepend">
          <InputGroupText>
            <FontAwesomeIcon icon={faCoffee} />
          </InputGroupText>
        </InputGroupAddon>
        <FormInput />
      </InputGroup>
    </div>
  );
}

to prepend an icon to the FormInput .

We install the Font Awesome React packages by running:

npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

List Group

We can add a list group into our React app with the ListGroup and ListGroupItem components.

For instance, we can write:

import React from "react";
import { ListGroup, ListGroupItem } from "shards-react";

import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <ListGroup>
        <ListGroupItem>Cras justo odio</ListGroupItem>
        <ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
        <ListGroupItem>Morbi leo risus</ListGroupItem>
      </ListGroup>
    </div>
  );
}

Modal

We can add a modal into our React app with the Modal , ModalBody and ModalHeader components.

For instance, we can write:

import React, { useState } from "react";
import { Button, Modal, ModalBody, ModalHeader } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  const [open, setOpen] = useState();

  const toggle = () => {
    setOpen((o) => !o);
  };

  return (
    <div className="App">
      <Button onClick={toggle}>Click Me</Button>
      <Modal open={open} toggle={toggle}>
        <ModalHeader>Header</ModalHeader>
        <ModalBody>Hello there!</ModalBody>
      </Modal>
    </div>
  );
}

We a button that calls the toggle function when we click on the button.

It calls setOpen to control the open state.

open prop sets the open state of the Modal .

The toggle prop has the toggle function to toggle the modal open state.

To change the size of the modal, we set the size prop.

For instance, we can write:

import React, { useState } from "react";
import { Button, Modal, ModalBody, ModalHeader } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  const [open, setOpen] = useState();

  const toggle = () => {
    setOpen((o) => !o);
  };

  return (
    <div className="App">
      <Button onClick={toggle}>Click Me</Button>
      <Modal size="sm" open={open} toggle={toggle}>
        <ModalHeader>Header</ModalHeader>
        <ModalBody>Hello there!</ModalBody>
      </Modal>
    </div>
  );
}

to make the modal smaller. lg makes the modal larger.

Conclusion

We can change input group size, add list groups, and modals with Shards React.