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.