react-beast-modal

    0.0.3 • Public • Published

    React Beast Modal Usage

    1. In your root index.js (or whatever you call it) file
    // index.js
    import React from 'react';
    import ReactDOM from 'react-dom';
    import ModalProvider from 'react-beast-modal';
     
    import App from './App';
    import Home from './home';
     
    /*****************************************************
     ** create a configuration variable ******************
     *****************************************************/
     
    const modalConfig = {
      backdropStyle: { // defaults to empty object
        backgroundColor: 'rgba(0, 0, 0, 0.3)'
      },
      modalContainerStyle: { //default to empty object
        borderRadius: '2px'
      },
      closeOnBackdropClick: true // default is false
    }
     
    /*****************************************************
     ** wrap the outermost component in the modal provider
     *****************************************************/
     
    ReactDOM.render(
      <div>
        <ModalProvider configuration={modalConfig}>
          <App>
            <Home/>
          </App>
        </ModalProvider>
      </div>, 
      document.getElementById('root')
    );
     
    1. In any component you want to use the modal, import the withBeastModal HOC (Higher Order Component)
    // home.js
    import React from 'react';
    /* withBeastModal is a HOC that adds a function `toggleBeastModal` 
     * and a boolean `beastModalVisible` to the props
     */
    import { withBeastModal } from 'react-beast-modal';
     
    import WelcomeModal from './welcomeModal';
     
    class Home extends React.Component {
      showWelcomeModal = () => {
        const { beastModalVisible } = this.props;
        // toggleBeastModal takes an object with two props
        // isVisible (boolean): default is false
        // modalContent (react element):
        this.props.toggleBeastModal({ 
          isVisible: !beastModalVisible,
          modalContent: (
            <WelcomeModal/>
          )
        })
      }
      
      render() {
        return (
          <div>
            <h1>Home Page</h1>
            <button onClick={this.showWelcomeModal}>Click me</button>
          </div>
        );
      }
    }
     
    // pass the component to the `withBeastModal` HOC
    export default withBeastModal(Home);

    Keywords

    Install

    npm i react-beast-modal

    DownloadsWeekly Downloads

    1

    Version

    0.0.3

    License

    ISC

    Unpacked Size

    62.4 kB

    Total Files

    9

    Last publish

    Collaborators

    • skellertor