5.1.0 • Published 2 years ago

@randajan/react-popup v5.1.0

Weekly downloads
33
License
MIT
Repository
github
Last release
2 years ago

@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, { PopUp } from '@randajan/react-popup'; 
import '@randajan/react-popup/css'; //default css

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 = ModalProvider.usePop(<div>Content of PopUp window</div>);

    useEffect(_ => Pop.up());

    return null;
}

or as hook with dynamic content

function PopUp() {
    const Pop = ModalProvider.usePop();

    useEffect(_ => Pop.up(<div>Content of PopUp window</div>));

    return null;
}

or as hook with custom control

function PopUpCustomButton() {
    const pop = ModalProvider.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

nametypeargumentsreturnuse
Provider (default)React Elementpropsdiv containerProvider
PopUpReact ElementpropsnullPopUp window occurs immidiately after render this element
usePopReact Hookprops or ReactElementPopReturn Pop instance !not React Component!
useModalReact Hook-ModalReturn Modal instance !not React Component!
cssTranslatestatictranslator-cssTranslate(defaultClassName=>customClassName) can be used to change all default classNames

Provider props

proptypeuse
onChangeFunctionWill be called after every change
onUpFunctionCalled after any Pop was opened
onDownFunctionCalled after any Pop was closed
listBooleanOrder of Pops will be ignored
transitionNumber or ObjectWill be passed to CSSTransition.props.timeout
closeButtonanythe default close button of every Pop
idStringwill be passed to div
titleStringwill be passed to div
classNameStringwill be passed to div
flagsObjecton 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}/>

proptypeuse
children*ReactElementContent of PopUp window
lockBooleanOn TRUE the PopUp window can't be closed manually
transitionNumber or ObjectWill be passed to CSSTransition.props.timeout
closeButtonanyclose button for the Pop
onChangeFunctionWill be called after every change
onUpFunctionCalled after the frame was opened
onDownFunctionCalled after the frame was closed
flagsObjectsame as at provider

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

The Pop instance

nametypeargumentsreturnuse
Pop.upFunctionstatechangelistWill apply state changes and rise Pop window
Pop.downFunctionnullWill close the Pop window and pass any arguments to the onBogDown where you can catch them.
Pop.lockFunctionnullWill lock the Pop window
Pop.unlockFunctionnullWill 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 | mounting | 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

5.1.0

2 years ago

5.0.0

2 years ago

5.0.3

3 years ago

5.0.2

3 years ago

5.0.1

3 years ago

4.0.1

4 years ago

4.0.0

4 years ago

3.1.2

5 years ago

3.1.1

5 years ago

3.1.0

5 years ago

3.0.17

5 years ago

3.0.16

5 years ago

3.0.15

5 years ago

3.0.12

5 years ago

3.0.13

5 years ago

3.0.14

5 years ago

3.0.11

5 years ago

3.0.10

5 years ago

3.0.9

5 years ago

3.0.8

5 years ago

3.0.7

5 years ago

3.0.6

5 years ago

3.0.4

5 years ago

3.0.5

5 years ago

3.0.3

5 years ago

3.0.2

5 years ago

3.0.1

5 years ago

3.0.0

5 years ago

2.2.2

5 years ago

2.2.1

5 years ago

2.2.0

5 years ago

2.1.0

5 years ago

2.0.3

5 years ago

2.0.2

5 years ago

2.0.4

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.0.0

5 years ago