@kaprisa57/react-modaldeprecated

Modal React Component

Usage no npm install needed!

<script type="module">
  import kaprisa57ReactModal from 'https://cdn.skypack.dev/@kaprisa57/react-modal';
</script>

README

Modal React Component

NPM JavaScript Style Guide Coverage Status

Install

npm install --save @kaprisa57/react-modal
yarn add @kaprisa57/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 '@kaprisa57/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 '@kaprisa57/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