Category: React

React Suite

Getting Started with React Development with the React Suite Library — Icons and Alerts

Post author By John Au-Yeung
Post date January 10, 2021
No Comments on Getting Started with React Development with the React Suite Library — Icons and Alerts

React Suite 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.

Icons

We can add icons to our React app with the Icon component.

For instance, we can write:

import React from "react";
import { Icon } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Icon icon="star" />
    </div>
  );
}

The icon prop has the name of the icon we want to add.

We can set the size with the size prop:

import React from "react";
import { Icon } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Icon icon="star" size="lg" />
    </div>
  );
}

And we can stack multiple icons together with the IconStack component:

import React from "react";
import { Icon, IconStack } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <IconStack size="lg">
        <Icon icon="camera" stack="1x" />
        <Icon icon="ban" stack="2x" style={{ color: "#f44336" }} />
      </IconStack>
    </div>
  );
}

Tooltip

We can add a tooltip with React Suite’s Tooltip component.

For instance, we can write:

import React from "react";
import { Tooltip } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Tooltip visible>This is a tooltip.</Tooltip>
    </div>
  );
}

We can add the Whisper component to add let us add a trigger to open the tooltip.

For instance, we can add a button trigger by writing:

import React from "react";
import { Whisper, Button, Tooltip } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Whisper
        trigger="click"
        placement="right"
        speaker={<Tooltip>tooltip</Tooltip>}
      >
        <Button appearance="subtle">click me</Button>
      </Whisper>
    </div>
  );
}

We put the Tooltip in the speaker prop to and the Button inside the Whisper component to make the button trigger the tooltip.

We can set placement to other values listed at https://rsuitejs.com/components/tooltip/

Also, we can make disabled buttons trigger tooltips by writing:

import React from "react";
import { Whisper, Button, Tooltip } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Whisper speaker={<Tooltip> Tooltip!</Tooltip>}>
        <span>
          <Button disabled style={{ pointerEvents: "none" }}>
            button
          </Button>
        </span>
      </Whisper>
    </div>
  );
}

We need to set pointerEvents to 'none' to let us trigger the tooltip when we hover over the disabled button.

Alert

We can add alerts with the Alert object.

For instance, we can write:

import React from "react";
import { Alert, ButtonToolbar, Button } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div>
      <ButtonToolbar>
        <Button onClick={() => Alert.info("This is a informations.", 5000)}>
          Info
        </Button>
      </ButtonToolbar>
    </div>
  );
}

We call Alert.info method to show the alert text in the first argument.

The 2nd argument is the number of milliseconds to show the alert.

Also, we can call Alert.success , Alert.warning , and Alert.error to show other kinds of alerts.

Conclusion

We can show alerts and icons in our React app with React Suite.

React Suite

Getting Started with React Development with the React Suite Library — Buttons

Post author By John Au-Yeung
Post date January 10, 2021
No Comments on Getting Started with React Development with the React Suite Library — Buttons

React Suite 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.

Installation

We can install React Suite by running:

npm i rsuite --save

with NPM or we run:

yarn add rsuite

with Yarn.

Button

Once we installed the package, we can add a button by using the Button component:

import React from "react";
import { Button } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

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

We set the background color with the appearance prop.

Other possible values include primary , link , subtle , and ghost .

We have to add the bundled CSS to see the styles.

We can change the size with the size prop:

import React from "react";
import { Button } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

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

lg makes it large.

Other values include md for medium size, sm for small size, or xs for extra small.

We can add an icon button with the IconButton component.

For instance, we can write:

import React from "react";
import { IconButton, Icon } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <IconButton icon={<Icon icon="star" />} circle size="lg" />
    </div>
  );
}

We can add a button group with ButtonGroup :

import React from "react";
import { ButtonGroup, Button } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <ButtonGroup size="md">
        <Button>Left</Button>
        <Button>Center</Button>
        <Button>Right</Button>
      </ButtonGroup>
    </div>
  );
}

We can set the color with the color prop:

import React from "react";
import { Button } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Button color="orange">Orange</Button>
    </div>
  );
}

We can add icons to buttons with the Icon component:

import React from "react";
import { Button, Icon } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Button color="red">
        <Icon icon="google-plus-circle" /> Google Plus
      </Button>
    </div>
  );
}

We can add a block-level button with the block prop:

import React from "react";
import { Button, ButtonToolbar } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

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

Also, we can add a vertical button group with the vertical prop on the ButtonGroup :

import React from "react";
import { Button, ButtonGroup } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

const appearance = "primary";

export default function App() {
  return (
    <div className="App">
      <ButtonGroup vertical>
        <Button appearance={appearance}>Top</Button>
        <Button appearance={appearance}>Middle</Button>
        <Button appearance={appearance}>Bottom</Button>
      </ButtonGroup>
    </div>
  );
}

And we can make the buttons equally side in the button group with the justified prop:

import React from "react";
import { Button, ButtonGroup } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

const appearance = "primary";

export default function App() {
  return (
    <div className="App">
      <ButtonGroup justified>
        <Button appearance={appearance}>Top</Button>
        <Button appearance={appearance}>Middle</Button>
        <Button appearance={appearance}>Bottom</Button>
      </ButtonGroup>
    </div>
  );
}

Conclusion

We can install React Suite and add buttons from them easily in our React app.

Shards React

React Development with the Shards React Library — Sliders and Tooltips

Post author By John Au-Yeung
Post date January 10, 2021
No Comments on 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.

Shards React

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

Post author By John Au-Yeung
Post date January 10, 2021
No Comments on 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.

Shards React

React Development with the Shards React Library — Navbar

Post author By John Au-Yeung
Post date January 10, 2021
No Comments on 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.