@idui/react-modal
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.4 • Public • Published

    Modal React Component

    NPM Size JavaScript Style Guide Coverage Status LICENSE

    Install

    npm install --save @idui/react-modal
    yarn add @idui/react-modal

    Advantages

    • Fully and easily customizable.
    • Uses styled-components.
    • Provides useModal hook, which returns openModal promise.
    • Supports children and content functions and provides them with some useful props.

    Basic Example

    import React from 'react'
    
    import Modal, { ModalsRoot } from '@idui/react-modal'
    
    // Define where modals should render
    function App() {
        return (
            <div>
                <Example />
                <ModalsRoot />
            </div>
        )       
    }
    
    // Component with modal
    function Example() {
      return <Modal>
        <button>Open</button>
      </Modal>
    }

    useModal hook

    If you want to use useModal hook wrap your components in ModalsProvider

    const { openModal } = useModal();
    
    const promise = openModal(content, modalProps)

    Arguments:

    • content - Modal content
    • modalProps - Modal props

    Returns: Promise

    import React from 'react'
    
    import { ModalsProvider, useModal } from '@idui/react-modal'
    
    // wrap your components in ModalsProvider
    function App() {
        return (
            <ModalsProvider>
                <Example />
            </ModalsProvider>
        )       
    }
    
    // Component with modal
    function Example() {
        const { openModal } = useModal();
      
        const handleOpen = useCallback(() => {
          openModal(({ close }) => (
            <button onClick={close}>Close</button>
          )).then(() => {
            alert('Modal closed');
          });
        }, [openModal]);
        
        return (
          <button onClick={handleOpen}>Open modal</button>
        );
    }

    See more details in storybook

    License

    MIT © kaprisa57@gmail.com

    Keywords

    none

    Install

    npm i @idui/react-modal

    DownloadsWeekly Downloads

    5

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    16.5 kB

    Total Files

    5

    Last publish

    Collaborators

    • kaprisa57