Nitroglycerin Pickle Machine

    react-awesome-popups

    0.0.14 • Public • Published

    React Awesome Popups

    A lightweight, extendable, fast performing, highly customizeable, production ready React Component that renders an animated set of popups.

    See this project at NPM

    NPMnpm

    react-awesome-popups demo

    Key Features

    • 60 FPS animated popups
    • Customizable animated transitions
    • Customizable colours
    • OnPress ripple effect
    • Look and feel customisable and extendable in two ways: via custom CSS stylesheet override or style prop which can be determined at runtime.

    Live demo

    Checkout the live demo at my web portfolio page.

    You can run this demo locally on 3000 by:

    1. Cloning this repository

      git clone https://github.com/JSANJ/react-awesome-popups.git

    2. Navigate to the demo directory

      cd react-awesome-popups && cd demo

    3. Installing the dependencies in the demo directory

      npm install --dev

    4. Starting the demo

      npm start

    Installation

    npm install --save react-awesome-poups
    

    AwesomePopupsContainer

    AwesomePopupsContainer API

    AwesomePopupsContainer.popup(component, animStates) Adds the popup component and starts the animation using the animStates start key.

    • component: (AwesomePopup) - popup component to be displayed
    • animStates: ({string: AnimState} object) - start and end keys are required.

    returns: popupId (string)

    AwesomePopupsContainer.close(popupId) Performs the close animation on the popup and removes it elegantly.

    • popupId: (string) - the ID of the popup acquired when added to the container.

    AwesomePopupsContainer.remove(popupId) Removes the popup with the given popupId immediately.

    • popupId: (string) - the ID of the popup acquired when added to the container.

    AwesomePopupsContainer.remove(popupId) Removes the popup with the given popupId immediately.

    • popupId: (string) - the ID of the popup acquired when added to the container.

    AnimState

    Attribute Type Default Description
    style string null Render this style object as the next transitioned animation
    duration number 0 Sets the transition to last this long, also triggers the next state at the end
    nextStateKey string null The key of the next 'AnimState' in the 'AnimStates' object
    unmountOnComplete bool false Should unmount the component when the animation duration passes

    AwesomePopupsContainer props

    Attribute Type Default Description
    children any null The component's children to be rendered

    AwesomePopup

    AwesomePopup API (Internal)

    AwesomePopup.queueState(newState) Updates the animation state and queues the next state.

    • newState: (AnimState) - an object containing the style, duration, and other animation parameters

    AwesomePopup.startUnmount() Begins the unmounting of the component by starting the end animation state.

    AwesomePopup.queueDelete(ms, popupId) Queues the unmounting of the component after a given delay in milliseconds.

    • ms: (number) - delay in milliseconds
    • popupId: (string) - ID of the popup to be sent to the container for unmounting

    AwesomePopup.doDelete(popupId) Calls the onUnmount function of the popup. Also triggers the onEndComplete callback

    • popupId: (string) - ID of the popup to be sent to the container for unmounting

    AwesomePopup props

    Attribute Type Default Description
    onClick function null Triggered when the component is clicked
    onStart function null Triggered when the component is mounted
    onStartComplete function null Triggered when the component reaches its 'wait' animation
    onEnd function null Triggered when the component is beginning its removal
    onEndComplete function null Triggered when the component is just about to be unmounted
    popupId string generated This is a key added to the popup when inserted into the AwesomePopupsContainer
    closeButton component auto An object placed at the end of the container to trigger closing the popup when pressed
    style object null An object to add as the React css style of the component
    type string custom ( success
    animStates object null {string:AnimState} key-value object for animating the component
    children any null The component's children to be rendered

    AwesomePopupStates

    This is a {string:AnimStates} key-value object. Each 'AnimStates' is then a {string:AnimState} object clip: An AnimStates object for a default clipping animation fade: An AnimStates object for a default fade animation

    ReactAwesomePopups basic example

    Checkout this example live on the storyboard.

    In the App.js File

    import { AwesomePopupsContainer } from 'react-awesome-popups'
    
    global.ReactAwesomePopups = new React.createRef();
    
    function App(props) {
      return (
        <div>
          <Your_Header_Component/>
          <Your_Container>
            <AwesomePopupsContainer ref={global.ReactAwesomePopups}/>
          </Your_Container>
        </div>
      );
    }
    
    export default App;
    

    Then in any other file, call the API

    import { AwesomePopup } from 'react-awesome-popups'
    global.ReactAwesomePopups.popup(
        <AwesomePopup type="info">
            Hello there!
        </AwesomePopup>
    );
    
    

    You can create a custom popup to override the AwesomePopup class

    import { AwesomePopup } from 'react-awesome-popups'
    
    class YourAwesomePopup extends AwesomePopup {
        startUnmount() {
            // New start unmount logic
        }
    }
    
    

    Developer Installation

    Establish git hooks link Navigate to project directory and run:

    git config --local core.hooksPath git_hooks
    

    Future Work

    React Native Version

    (In Progress)

    Author

    Justin San Juan

    License

    MIT. Copyright (c) 2020 Justin San Juan.

    Install

    npm i react-awesome-popups

    DownloadsWeekly Downloads

    1

    Version

    0.0.14

    License

    ISC

    Unpacked Size

    125 kB

    Total Files

    9

    Last publish

    Collaborators

    • justinsj