Category: React

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.

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.

Form Select

We can add a select dropdown into our React app with Shards React’s FormSelect component.

For instance, we can write:

import React from "react";
import { FormSelect } 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">
      <FormSelect>
        <option value="first">first</option>
        <option value="second">second</option>
        <option value="third" disabled>
          third
        </option>
      </FormSelect>
    </div>
  );
}

We add the option elements indie the FormSelect to add the options.

The disabled prop disabled the select element.

We can set the size with the size prop:

import React from "react";
import { FormSelect } 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">
      <FormSelect size="sm">
        <option value="first">first</option>
        <option value="second">second</option>
        <option value="third" disabled>
          third
        </option>
      </FormSelect>
    </div>
  );
}

sm makes it small.

lg makes it large.

And we can add border color to indicate validation status with the valid and invalid props:

import React from "react";
import { FormSelect } 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">
      <FormSelect valid>
        <option value="first">first</option>
        <option value="second">second</option>
        <option value="third" disabled>
          third
        </option>
      </FormSelect>
    </div>
  );
}

Text Area

We can add a text area into our React app with the FormTextarea component.

For instance, we can write:

import React, { useState } from "react";
import { FormTextarea } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  const [text, setText] = useState("abc");

  return (
    <div className="App">
      <FormTextarea value={text} onChange={(e) => setText(e.target.value)} />
    </div>
  );
}

We pass in an event handler to the onChange prop to set the text value with setText .

And we set the value of the text area with the value prop.

Input Group

We can add an input group to add inputs with items beside them.

For instance, we can write:

import React from "react";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupText,
  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 className="mb-2">
        <InputGroupAddon type="prepend">
          <InputGroupText>$</InputGroupText>
        </InputGroupAddon>
        <FormInput placeholder="Total Amount" />
      </InputGroup>
    </div>
  );
}

We add the InputGroupAddon to add content besides the FormInput .

The type prop is set to prepend to add content to the left of the input.

We can also set type to append to add content to the right of the input.

Input Group Dropdowns

We can add a dropdown beside an input.

For instance, we can write:

import React, { useState } from "react";
import {
  InputGroup,
  FormInput,
  Dropdown,
  DropdownItem,
  DropdownToggle,
  DropdownMenu
} 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">
      <InputGroup className="mb-2">
        <FormInput />
        <Dropdown addonType="append" open={open} toggle={toggle}>
          <DropdownToggle caret>Dropdown</DropdownToggle>
          <DropdownMenu right>
            <DropdownItem>Action</DropdownItem>
            <DropdownItem>Another action</DropdownItem>
            <DropdownItem>Something else here</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </InputGroup>
    </div>
  );
}

to add a Dropdown beside a FormInput .

Conclusion

We can add input groups and select dropdowns into our React app with Shards React.

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.

Form Input

We can add a text input into our React app with Shards React’s FormInput component.

For instance, we can write:

import React from "react";
import { 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">
      <FormInput placeholder="form input" />;
    </div>
  );
}

to add it into our app.

placeholder has the input placeholder.

We can change the size with:

import React from "react";
import { 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">
      <FormInput size="lg" placeholder="form input" />;
    </div>
  );
}

size has the form input size.

lg makes it big.

sm makes it small.

We can set valid and invalid to display a green border if it’s valid and a red border if it’s not.

For instance, we can write:

import React from "react";
import { 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">
      <FormInput valid placeholder="form input" />;
    </div>
  );
}

to add it.

Radio Buttons

We can add radio buttons with the FormRadio component.

For instance, we can write:

import React, { useState } from "react";
import { FormRadio } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  const [selectedFruit, setSelectedFruit] = useState();
  const changeFruit = (fruit) => {
    setSelectedFruit(fruit);
  };

  return (
    <div className="App">
      <FormRadio
        name="fruit"
        checked={selectedFruit === "orange"}
        onChange={() => {
          changeFruit("orange");
        }}
      >
        Orange
      </FormRadio>
      <FormRadio
        name="fruit"
        checked={selectedFruit === "lemon"}
        onChange={() => {
          changeFruit("lemon");
        }}
      >
        Lemon
      </FormRadio>
    </div>
  );
}

We have the changeFruit function which calls setSelectedFruit to change the selectedFruit state.

Then we add the boolean expression to set the radio button value to the checked prop.

If it returns true , then the radio button is selected.

We should set their name props to be the same so they’re identified as being in the same group.

We can make it inline with the inline prop:

import React, { useState } from "react";
import { FormRadio } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  const [selectedFruit, setSelectedFruit] = useState();
  const changeFruit = (fruit) => {
    setSelectedFruit(fruit);
  };

  return (
    <div className="App">
      <FormRadio
        inline
        name="fruit"
        checked={selectedFruit === "orange"}
        onChange={() => {
          changeFruit("orange");
        }}
      >
        Orange
      </FormRadio>
      <FormRadio
        inline
        name="fruit"
        checked={selectedFruit === "lemon"}
        onChange={() => {
          changeFruit("lemon");
        }}
      >
        Lemon
      </FormRadio>
    </div>
  );
}

Conclusion

We can add form inputs and radio buttons into our React app with Shards React.

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.

Form

Shards React comes with the Form component to let us add forms into our React app.

For instance, we can write:

import React from "react";
import { Form, FormInput, FormGroup } 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">
      <Form className="p-1">
        <FormGroup>
          <label htmlFor="#username">Username</label>
          <FormInput id="#username" placeholder="Username" />
        </FormGroup>
        <FormGroup>
          <label htmlFor="#password">Password</label>
          <FormInput type="password" id="#password" placeholder="Password" />
        </FormGroup>
      </Form>
    </div>
  );
}

to add the Form component with FormGroup s and FormInput s to add input fields into our app.

Checkbox

We can add a checkbox with the FormCheckox component.

For example, we can write:

import React, { useState } from "react";
import { FormCheckbox } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  const [selected, setSelected] = useState({});
  const { orange, lemon } = selected;

  const handleChange = (e, fruit) => {
    setSelected((fruits) => ({ ...fruits, [fruit]: !selected[fruit] }));
  };

  return (
    <div className="App">
      <FormCheckbox
        checked={orange}
        onChange={(e) => handleChange(e, "orange")}
      >
        Orange
      </FormCheckbox>
      <FormCheckbox checked={lemon} onChange={(e) => handleChange(e, "lemon")}>
        Lemon
      </FormCheckbox>
    </div>
  );
}

We have the selected state which is an object.

Then we destructured the object and pass those properties into the checked prop of FormCheckbox to set the checked state of each checkbox.

Then we add the onChange handler to each checkbox to call handleChange to update the checked value.

We can turn them to toggles with the toggle prop:

import React, { useState } from "react";
import { FormCheckbox } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  const [selected, setSelected] = useState({});
  const { orange, lemon } = selected;

  const handleChange = (e, fruit) => {
    setSelected((fruits) => ({ ...fruits, [fruit]: !selected[fruit] }));
  };

  return (
    <div className="App">
      <FormCheckbox
        toggle
        checked={orange}
        onChange={(e) => handleChange(e, "orange")}
      >
        Orange
      </FormCheckbox>
      <FormCheckbox
        toggle
        checked={lemon}
        onChange={(e) => handleChange(e, "lemon")}
      >
        Lemon
      </FormCheckbox>
    </div>
  );
}

We can add the small and toggle props to add a small toggle:

import React, { useState } from "react";
import { FormCheckbox } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  const [selected, setSelected] = useState({});
  const { orange, lemon } = selected;

  const handleChange = (e, fruit) => {
    setSelected((fruits) => ({ ...fruits, [fruit]: !selected[fruit] }));
  };

  return (
    <div className="App">
      <FormCheckbox
        toggle
        small
        checked={orange}
        onChange={(e) => handleChange(e, "orange")}
      >
        Orange
      </FormCheckbox>
      <FormCheckbox
        toggle
        small
        checked={lemon}
        onChange={(e) => handleChange(e, "lemon")}
      >
        Lemon
      </FormCheckbox>
    </div>
  );
}

We can make them inline with the inline prop:

import React, { useState } from "react";
import { FormCheckbox } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  const [selected, setSelected] = useState({});
  const { orange, lemon } = selected;

  const handleChange = (e, fruit) => {
    setSelected((fruits) => ({ ...fruits, [fruit]: !selected[fruit] }));
  };

  return (
    <div className="App">
      <FormCheckbox
        inline
        checked={orange}
        onChange={(e) => handleChange(e, "orange")}
      >
        Orange
      </FormCheckbox>
      <FormCheckbox
        inline
        checked={lemon}
        onChange={(e) => handleChange(e, "lemon")}
      >
        Lemon
      </FormCheckbox>
    </div>
  );
}

Conclusion

We can add forms and checkbox into our React app with Shards React.

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.

Button

We can add a button with React Shard’s Button component.

For instance, we can write:

import React from "react";
import { Button } from "shards-react";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <Button theme="secondary">Secondary</Button>
    </div>
  );
}

We set the theme to set the background color.

We can also set it to success , danger , info , light , and dark .

If we leave it out, we see a blue background color.

We can add an outlined style with the outline prop:

import React from "react";
import { Button } from "shards-react";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <Button outline theme="secondary">
        Secondary
      </Button>
    </div>
  );
}

And we can make it pill-shaped with the pill prop:

import React from "react";
import { Button } from "shards-react";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <Button pill theme="secondary">
        Secondary
      </Button>
    </div>
  );
}

We can add all the props together.

Also, we can make it square with the squared prop:

import React from "react";
import { Button } from "shards-react";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <Button squared theme="secondary">
        Secondary
      </Button>
    </div>
  );
}

And we can change the size with the size prop:

import React from "react";
import { Button } from "shards-react";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <Button size="lg" theme="secondary">
        Secondary
      </Button>
    </div>
  );
}

The active state can be added with the active prop:

import React from "react";
import { Button } from "shards-react";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <Button active>Secondary</Button>
    </div>
  );
}

The disabled prop lets us make the button look disabled:

import React from "react";
import { Button } from "shards-react";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <Button disabled>Secondary</Button>
    </div>
  );
}

The block prop makes the button display as a block-level element:

import React from "react";
import { Button } from "shards-react";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <Button block>Secondary</Button>
    </div>
  );
}

Conclusion

We can add buttons with various styles into our React app with Shards React.