Nickel Palladium Manganese

    react-tailwind-kit
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.1 • Public • Published

    React Wrapper for tailwind modal

    Use Tailwind in React js, Compitable with react js and next js.

    Installation Commands

    npm install react-tailwind-kit

    How to use

    1. import css in index.js/ts or app.jsx or app.tsx. (if tailwind project import it after main tailwind css)
    import 'react-tailwind-kit/dist/style.css';
    1. use the simple modal
    import { Modal,Button } from 'react-tailwind-kit';
    
    const App=()=>{
      const [show, setShow] = useState(false)
    
      return <div>
        <Button title='Open Modal' onClick={() => setShow(true)} type="fill" />
    
        <Modal
          title='Simple Modal'
          show={show}
          setShow={setShow}
          footer={<>
            <Button title='Cancel' onClick={() => setShow(false)} />
            <Button title='Done' onClick={() => setShow(false)} type="fill" />
          </>}
          onClose={() => { console.log("closing the modal") }} //optional
        >
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione omnis laborum maxime blanditiis rem iusto. Nostrum est eligendi aliquid nulla eaque, reprehenderit aliquam ratione cumque, excepturi magnam libero labore vero?</p>
        </Modal>
      </div>
    }

    screenshot 1

    screenshot

    1. use offcanvas
    import { OffCanvas , Button } from 'react-tailwind-kit';
    
    const App=()=>{
      const [show, setShow] = useState(false)
    
      return <div>
        <Button title='Open Left Off Canvas' onClick={() => setShow(true)} type="fill" />
        <Button title='Open Right Off Canvas' onClick={() => setShow(true)} type="fill" />
    
        <OffCanvas
          title='Left Modal'
          show={show}
          setShow={setShow}
          onClose={() => { console.log("closing the OffCanvas") }} //optional
        >
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione omnis laborum maxime blanditiis rem iusto. Nostrum est eligendi aliquid nulla eaque, reprehenderit aliquam ratione cumque, excepturi magnam libero labore vero?</p>
        </OffCanvas>
    
        <OffCanvas
          title='Right Modal'
          position='right'
          show={show}
          setShow={setShow}
        >
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione omnis laborum maxime blanditiis rem iusto. Nostrum est eligendi aliquid nulla eaque, reprehenderit aliquam ratione cumque, excepturi magnam libero labore vero?</p>
        </OffCanvas>
      </div>
    }

    screenshot 2

    screenshot

    Install

    npm i react-tailwind-kit

    DownloadsWeekly Downloads

    0

    Version

    0.0.1

    License

    MIT

    Unpacked Size

    62.5 kB

    Total Files

    19

    Last publish

    Collaborators

    • milon27