Never Print Magazines

    @randajan/react-popup

    5.0.3 • Public • Published

    @randajan/react-popup

    Simple modal windows for react

    NPM JavaScript Style Guide

    Install

    npm install --save @randajan/react-popup

    Purpose

    • Handle multiple PopUp window with css animation and single blurry background
    • Handle multiple frames with PopUps in one application
    • Create hook for rise accessibility and customizability

    Usage

    First wrap your app into provider

    import ModalProvider { Modal, PopUp } from '@randajan/react-popup'
    
    class App extends Component {
      render () {
        return (
          <ModalProvider>
            <MyComponents />
          <ModalProvider />
        )
      }
    }

    Then use it anywhere inside as element,

    <PopUp>
        <div>Content of PopUp window</div>
    </PopUp>

    as hook with static content

    function PopUp() {
        const Pop = Modal.usePop(<div>Content of PopUp window</div>);
    
        useEffect(_ => Pop.up());
    
        return null;
    }

    or as hook with dynamic content

    function PopUp() {
        const Pop = Modal.usePop();
    
        useEffect(_ => Pop.up(<div>Content of PopUp window</div>));
    
        return null;
    }

    or as hook with custom control

    function PopUpCustomButton() {
        const Pop = Modal.usePop({lock:true, onDown: (Pop, custom) => alert(custom)});
    
        useEffect(_ =>{ Pop.up(
            <div>
                <p>Content of PopUp window</p>
                <button onClick={_ => Pop.down(true)}>Yes</button>
                <button onClick={_ => Pop.down(false)}>No</button>
            </div>
        )});
    
        return null;
    }

    The props for PopUp React Element, Modal.usePop hook and open function Pop.up are 1:1

    Details

    Export

    name type arguments return use
    Provider (default) React Element props div container Provider
    PopUp React Element props null PopUp window occurs immidiately after render this element
    Modal class Provider, props instance Provider auto create scene
    Pop class Pop, key instance Modal.addPop will create Pop
    Modal.usePop React Hook props or ReactElement Pop Return Pop instance !not React Component!
    css static - - css.define({...}) can be used to change className of used components globally

    Provider props

    prop type use
    onChange Function Will be called after every change
    onUp Function Called after any Pop was opened
    onDown Function Called after any Pop was closed
    list Boolean Order of Pops will be ignored
    transition Number or Object Will be passed to CSSTransition.props.timeout
    x any the default close button of every
    id String will be passed to div
    title String will be passed to div
    className String will be passed to div
    flags Object on every key there should be a function. The props and state will be passed before render. When the function return true, the key will appears as part of data-flags attribute

    Modal.usePop(props) / <PopUp {...props}/>

    prop type use
    children* ReactElement Content of PopUp window
    lock Boolean On TRUE the PopUp window can't be closed manually
    transition Number or Object Will be passed to CSSTransition.props.timeout
    x any close button for the Pop
    onChange Function Will be called after every change
    onUp Function Called after the frame was opened
    onDown Function Called after the frame was closed
    flags Object same as at provider

    * if the children is the only argument of usePopUp or popUp it could be passed without wraping in object

    The Pop instance

    name type arguments return use
    Pop.up Function state changelist Will apply state changes and rise Pop window
    Pop.down Function null Will close the Pop window and pass any arguments to the onBogDown where you can catch them.
    Pop.lock Function null Will lock the Pop window
    Pop.unlock Function null Will unlock the Pop window

    Custom attribute "data-flags"

    There are some custom attributes that will be appended to the div container. It's mirroring the state of PopUp provider

    parent name purpose
    Modal load Waiting before first render
    Modal up When there is at least 1 Pop pending
    Modal modal When the list is false
    Modal list When the list is true
    Pop lock When the Pop is locked
    Pop top When the Pop is the top one

    * you can specify your own flags by passing to props the flags object

    License

    MIT © randajan

    Install

    npm i @randajan/react-popup

    DownloadsWeekly Downloads

    80

    Version

    5.0.3

    License

    MIT

    Unpacked Size

    215 kB

    Total Files

    7

    Last publish

    Collaborators

    • randajan