https://github.com/microcmsio/react-hooks-use-modal

This is a customizable modal with react-portal.
https://github.com/microcmsio/react-hooks-use-modal

Last synced: 2 months ago
JSON representation

This is a customizable modal with react-portal.

• Host: GitHub
• URL: https://github.com/microcmsio/react-hooks-use-modal
• Owner: microcmsio
• Created: 2019-09-06T13:37:07.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-15T10:12:52.000Z (over 1 year ago)
• Last Synced: 2024-01-22T12:07:15.977Z (5 months ago)
• Language: TypeScript
• Homepage: https://microcmsio.github.io/react-hooks-use-modal/
• Size: 1.17 MB
• Stars: 172
• Watchers: 7
• Forks: 22
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Lists

• awesome-react-hooks - `react-hooks-use-modal`
• awesome-stars - microcmsio/react-hooks-use-modal - This is a customizable modal with react-portal. (TypeScript)

README

        
# useModal

This is a react hook which can open the modal easily.

## Usage

```javascript

import React, { useState, useCallback } from 'react';

import { createRoot } from 'react-dom/client';

import { useModal } from 'react-hooks-use-modal';

const App = () => {

  const [Modal, open, close, isOpen] = useModal('root', {

    preventScroll: true,

    focusTrapOptions: {

      clickOutsideDeactivates: false,

    },

  });

  return (

    


      
Modal is Open? {isOpen ? 'Yes' : 'No'}

      OPEN

      

        


          
Title

          
This is a customizable modal.

          CLOSE

        

      

    

  );

};

const root = createRoot(document.getElementById('root'));

root.render();

```


## Syntax

### [ModalComponent, openFunc, closeFunc, isOpenBool] = useModal(domNode?, { initialValue?, preventScroll?, focusTrapOptions?, components? })

`ModalComponent`

Type: React.FC<{ title?: React.ReactNode; description?: React.ReactNode, children?: React.ReactNode, additionalProps?: Record }>

Modal component that displays children in the screen center.

If you specify `title` and `description`, `additionalProps` you must implement custom components with the `components` option's `Modal` property and render in them.

See EXAMPLE below for details.

https://github.com/microcmsio/react-hooks-use-modal/blob/master/examples/src/js/components-option/index.tsx

`openFunc`

A function to open modal.

`closeFunc`

A function to close modal.

`isOpenBool`

A boolean to know the state whether modal is open or not.

`domNode`

Optional.

Default value is 'root'.

Modal component uses React-Portal.

You can specify the output destination domNode with this argument

`initialValue`

Optional.

Default value is false.

This is useful when you want to mount the modal in an open position.

`preventScroll`

Optional to prevent scrolling while modal is open.

Default value is false.

`focusTrapOptions`

Override the focus-trap options used internally.

For example, to prevent a modal from closing when a non-modal element is clicked, do the following

```jsx

useModal('root', {

  focusTrapOptions: {

    clickOutsideDeactivates: false,

  },

});

```

`components`

Optional.

This is an option to customize the `ModalWrapper` returned by useModal.

Use as follows

```jsx

useModal('root', {

  components: {

    Modal: ({ title, description, children }) => {

      return (

        


          {title && 
{title}
}

          {description && 
{description}
}

          {children}

        

      );

    },

    Overlay: () => {

      return (

        


      );

    },

    Wrapper: ({ children }) => {

      return (

        


          {children}

        

      );

    },

  },

});

```


Combined with `ModalProvider` (described below), you can specify the default style for all `useModal` in the project.

## Global Settings

The `ModalProvider` component allows you to apply a common default configuration to all `useModal` hooks.

```jsx

  

```

The following example sets all `useModal` hooks to not scroll outside the modal by default.

```jsx

const Component1 = () => {

  const [Modal] = useModal('root');

  return (

    

      
Common

    

  );

};

const Component2 = () => {

  const [Modal] = useModal('root', { preventScroll: false }); // override

  return (

    

      
Override options

    

  );

};


const App = () => {

  return (

    

      

      

    

  );

};

```

## Demo

https://microcmsio.github.io/react-hooks-use-modal/

## How To Develop

### Setup

```

$ yarn

```

### Build src

```

$ yarn build

```

### Watch src

```

$ yarn watch

```

### Start demo

```

$ yarn start:demo

```

Then access it on http://localhost:3001/react-hooks-use-modal

## License

MIT