Categories
Shards React

React Development with the Shards React Library — Sliders and Tooltips

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.

Slider Values

We can bind the slider’s value to a state by setting the start prop and setting the onSlide prop.

For instance, we can write:

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

export default function App() {
  const [value, setValue] = useState(20);

  return (
    <div className="App">
      <p>Value: {value}</p>
      <Slider
        onSlide={([val]) => setValue(+val)}
        theme="success"
        connect={[true, false]}
        start={[value]}
        range={{ min: 0, max: 100 }}
      />
    </div>
  );
}

We have a function that gets the value from the array parameter.

Then we call setValue to set the value.

start has the value inside the array.

Multiple Values

We can also add range sliders with the connect prop set to true :

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

export default function App() {
  const [values, setValues] = useState([20, 50]);

  return (
    <div className="App">
      <p>Value: {values.join(" - ")}</p>
      <Slider
        onSlide={([min, max]) => setValues([+min, +max])}
        theme="success"
        connect
        start={values}
        range={{ min: 0, max: 100 }}
      />
    </div>
  );
}

We get the min and max values we selected from the array parameter.

Then we pass it into the setValues method as an array.

And we set start to values to set the value of the slider.

Pips

We can add pips onto the slider with the pips prop:

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

export default function App() {
  const [values, setValues] = useState([20, 50]);

  return (
    <div className="App">
      <p>Value: {values.join(" - ")}</p>
      <Slider
        onSlide={([min, max]) => setValues([+min, +max])}
        pips={{ mode: "steps", stepped: true, density: 3 }}
        connect
        start={values}
        range={{ min: 0, max: 100 }}
      />
    </div>
  );
}

Now we see ticks on the slider.

Tooltip

We can add tooltips with the Tooltip component.

For instance, we can write:

import React, { useState } from "react";
import { Tooltip, Button } 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 id="TooltipExample">Hover Me</Button>
      <Tooltip open={open} target="#TooltipExample" toggle={toggle}>
        I am a tooltip
      </Tooltip>
    </div>
  );
}

We add the Tooltip component with the open prop to control when the tooltip is opened.

toggle prop has the toggle function to toggle the open state to control the tooltip.

We can change the placement with the placement prop:

import React, { useState } from "react";
import { Tooltip, Button } 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 id="TooltipExample">Hover Me</Button>
      <Tooltip
        placement="right"
        open={open}
        target="#TooltipExample"
        toggle={toggle}
      >
        I am a tooltip
      </Tooltip>
    </div>
  );
}

And we can change how it’s triggered with the trigger prop:

import React, { useState } from "react";
import { Tooltip, Button } 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 id="TooltipExample">Click Me</Button>
      <Tooltip
        trigger="click"
        open={open}
        target="#TooltipExample"
        toggle={toggle}
      >
        I am a tooltip
      </Tooltip>
    </div>
  );
}

Conclusion

We can bind selected slider values to states and add tooltips onto the React app with Shards React.

Categories
Shards React

React Development with the Shards React Library — Popover and Number Slider

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.

Popover

We can add a popover into our React app with the Popover component.

For instance, we can write:

import React, { useState } from "react";
import { Button, Popover, PopoverBody, PopoverHeader } 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 id="popover-1" onClick={toggle}>
        Toggle
      </Button>
      <Popover
        placement="bottom"
        open={open}
        toggle={toggle}
        target="#popover-1"
      >
        <PopoverHeader>Title</PopoverHeader>
        <PopoverBody>Anim pariatur cliche reprehenderit</PopoverBody>
      </Popover>
    </div>
  );
}

We add the Popover with the placement prop to set the placement.

We can set placement to 'top' or 'bottom' .

The open prop lets us set the open state.

toggle component lets us toggle the popover.

PopoverHeader has the popover header.

PopoverBody has the body.

Progress

The Progress component lets us display progress bars in our React app.

For instance, we can write:

import React from "react";
import { Progress } 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">
      <Progress theme="primary" value={50} />;
    </div>
  );
}

to add a progress bar.

value has the progress value ranging from 0 to 100.

We can add labels to the progress bar by populating the child of the Progress component:

import React from "react";
import { Progress } 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">
      <Progress theme="primary" value={50}>
        50
      </Progress>
      ;
    </div>
  )
}

And we add multiple progress bars with the multi prop:

import React from "react";
import { Progress } 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">
      <Progress multi>
        <Progress bar value="50" />
        <Progress bar theme="success" value="20" />
      </Progress>
    </div>
  );
}

Slider

We can add a number slider with the Slider component.

For instance, we can write:

import React from "react";
import { Slider } 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">
      <Slider
        connect={[true, false]}
        start={[20]}
        range={{ min: 0, max: 100 }}
      />
    </div>
  );
}

The connect prop displays the colored bars between handles.

start has the initial value.

range has the min and max values we can select.

We can change the color of the bar with the theme prop:

import React from "react";
import { Slider } 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">
      <Slider
        theme="success"
        connect={[true, false]}
        start={[20]}
        range={{ min: 0, max: 100 }}
      />
    </div>
  );
}

Conclusion

We can add popovers and range sliders with Shards React.

Categories
Shards React

React Development with the Shards React Library — Navbar

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.

Nav

The Nav component lets us build navigation components.

For instance, we can write:

import React from "react";
import { Nav, NavItem, NavLink } 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">
      <Nav>
        <NavItem>
          <NavLink active href="#">
            Active
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">Link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">Link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink disabled href="#">
            Disabled Link
          </NavLink>
        </NavItem>
      </Nav>
    </div>
  );
}

We add NavItem s and NavLink s inside the Nav to add links for our app.

To display them as tabs, we can add the tabs prop:

import React from "react";
import { Nav, NavItem, NavLink } 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">
      <Nav tabs>
        <NavItem>
          <NavLink active href="#">
            Active
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">Link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">Link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink disabled href="#">
            Disabled Link
          </NavLink>
        </NavItem>
      </Nav>
    </div>
  );
}

And we can add the pills prop to display items as pills:

import React from "react";
import { Nav, NavItem, NavLink } 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">
      <Nav pills>
        <NavItem>
          <NavLink active href="#">
            Active
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">Link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">Link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink disabled href="#">
            Disabled Link
          </NavLink>
        </NavItem>
      </Nav>
    </div>
  );
}

We can make the navbar fill the width of the screen with the fill prop:

import React from "react";
import { Nav, NavItem, NavLink } 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">
      <Nav fill>
        <NavItem>
          <NavLink active href="#">
            Active
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">Link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">Link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink disabled href="#">
            Disabled Link
          </NavLink>
        </NavItem>
      </Nav>
    </div>
  );
}

We can add equal width nav elements with the justified prop:

import React from "react";
import { Nav, NavItem, NavLink } 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">
      <Nav justified>
        <NavItem>
          <NavLink active href="#">
            Active
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">Link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">Link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink disabled href="#">
            Disabled Link
          </NavLink>
        </NavItem>
      </Nav>
    </div>
  );
}

Navbar

We can add a navbar into our app with the Navbar component.

For instance, we can write:

import React, { useState } from "react";
import { faSearch } from "[@fortawesome/free-solid-svg-icons](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Ffortawesome%2Ffree-solid-svg-icons "Twitter profile for @fortawesome/free-solid-svg-icons")";
import { FontAwesomeIcon } from "[@fortawesome/react-fontawesome](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Ffortawesome%2Freact-fontawesome "Twitter profile for @fortawesome/react-fontawesome")";
import {
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  InputGroup,
  InputGroupAddon,
  InputGroupText,
  FormInput,
  Collapse
} from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  const [dropdownOpen, setDropdownOpen] = useState();
  const [collapseOpen, setCollapseOpen] = useState();

  const toggleNavbar = () => {
    setCollapseOpen((o) => !o);
  };

  const toggleDropdown = () => {
    setDropdownOpen((o) => !o);
  };

  return (
    <div className="App">
      <Navbar type="dark" theme="primary" expand="md">
        <NavbarBrand href="#">Shards React</NavbarBrand>
        <NavbarToggler onClick={toggleNavbar} />

        <Collapse open={collapseOpen} navbar>
          <Nav navbar>
            <NavItem>
              <NavLink active href="#">
                Active
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink href="#" disabled>
                Disabled
              </NavLink>
            </NavItem>
            <Dropdown open={dropdownOpen} toggle={toggleDropdown}>
              <DropdownToggle nav caret>
                Dropdown
              </DropdownToggle>
              <DropdownMenu>
                <DropdownItem>Action</DropdownItem>
                <DropdownItem>Another action</DropdownItem>
                <DropdownItem>Something else here</DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </Nav>

          <Nav navbar className="ml-auto">
            <InputGroup size="sm" seamless>
              <InputGroupAddon type="prepend">
                <InputGroupText>
                  <FontAwesomeIcon icon={faSearch} />
                </InputGroupText>
              </InputGroupAddon>
              <FormInput className="border-0" placeholder="Search..." />
            </InputGroup>
          </Nav>
        </Collapse>
      </Navbar>
    </div>
  );
}

We add the Collapse component into the Navbar to show it when we hit the sm breakpoint.

We have to add the navbar prop to the Collapse and Nav to make it fit in the navbar.

The Collapse component will be expanded when we hit the md breakpoint or higher.

The bottom Nav component has an InputGroup that’s displayed when we see regardless of screen size.

Conclusion

We can add navbars into our React app with Shards React.

Categories
Shards React

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.

Categories
Shards React

React Development with the Shards React Library — Select and Input Groups

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.