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.
