Modal React Component

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 © [email protected]