react-awesome-popups v0.0.14

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

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

AwesomePopupsContainer props

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

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

• Checkout my Full-Stack Web Developer Website
• Other open source projects @ Code Laboratory
• A scope of my work @ Web Developer Portfolio

License

MIT. Copyright (c) 2020 Justin San Juan.