https://github.com/littlee/react-x-modal

manage all modals in one place
https://github.com/littlee/react-x-modal

Last synced: 5 days ago
JSON representation

manage all modals in one place

• Host: GitHub
• URL: https://github.com/littlee/react-x-modal
• Owner: littlee
• Created: 2020-07-01T01:45:10.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T10:19:47.000Z (almost 2 years ago)
• Last Synced: 2023-02-27T03:41:24.183Z (over 1 year ago)
• Language: JavaScript
• Size: 165 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React X Modal

manage all modals in one place

## motivation

the typical way to render modal in react

- import modal component

- declare modal in JSX

- introduce a new state to control the visibility of the modal

this would become tedious when trying to manage multiple modals

react-x-modal let you open & close modals with a single method call

and pass other props to modal all at once

```js

// open

modal.open('myModal', { a: 'b' });

// close

modal.close('myModal');

```

## Install

```bash

npm i -S react-x-modal

```

## Usage

modal.js

```js

import xModal from 'react-x-modal';

const CommonModalWrap = props => {

  return (

    


      {props.children}

      X

    

  );

};


const ModalA = props => {

  return 
this is modal a
;

};


const ModalBWrap = props => {

  return 
{props.children}
;

};


const ModalB = props => {

  return (

    


      
this is modal b

      {/* render props passed when open */}

      {props.pass}

      close modal b

    

  );

};


const modal = xModal({

  wrap: CommonModalWrap,

  mapping: {

    modalA: ModalA,

    modalB: {

      wrap: ModalBWrap,

      component: ModalB

    }

  }

});

export default modal;

```

App.js

```js

import React from 'react';

import modal from './modal';

const App = props => {

  return (

    


       {

          modal.open('modalA');

        }}

      >

        open modal a

      

       {

          modal.open('modalB', {

            any: 'props',

            can: 'pass',

            from: 'here'

          });

        }}

      >

        open modal b

      

    

  );

};

```