Chakra Slider

A simple React and Chakra UI slider to be used effortlessly.

Install

To install the library do the following:

1yarn add 

Usage

Below is an example on how to use the library:

1import * as React from "react"
2import {
3  Box,
4  Text,
5  Code,
6  Button,
7} from "@chakra-ui/react"
8import Slider from "./components/Slider/Slider";
9import Slide from "./components/Slider/Slide";
10import { useState } from "react";
11
12export const App = () => {
13  const [isOpen, setIsOpen] = useState(true)
14  const toggleOpen = () => {
15    setIsOpen(!isOpen)
16  }
17  return (
18    <Box textAlign="center" fontSize="xl">
19        <Button onClick={toggleOpen}>Open Slider</Button>
20        <Slider isOpen={isOpen} hide={toggleOpen}>
21            <Slide title="My Title" description="Lorem ipsum aksdjlasdjlaksjdlaskj dlaksjdlkasj dlaksjd lkasjd lakjdlkasj dlkasjd lkasj dlkasjdlaksjdlkasjd laksdj lkajd lkasjd lkasjd lkasjd laksjd lakjd " />
22            <Slide title="My String" image="/logo512.png">
23            Lorem ipsum aksdjlasdjlaksjdlaskj dlaksjdlkasj dlaksjd lkasjd lakjdlkasj dlkasjd lkasj dlkasjdlaksjdlkasjd laksdj lkajd lkasjd lkasjd lkasjd laksjd lakjd
24            </Slide>
25            <Text>nani</Text>
26            <Text>nano</Text>
27        </Slider>
28    </Box>
29  )
30}