React-popapka NPM

react-popapka

Simple react popup function

Install

npm install --save react-popapka

Usage

import React, { Component } from 'react'

import { PopapkaContainer, popapka, closePopapka } from 'react-popapka';
import 'react-popapka/dist/index.css';

class Example extends Component {

  popapka = null

  open = () => {
    this.popapka = popapka({
      title: "this is my modal!!",
      content: (<div>this is content of my modal</div>),
      positiveButton: () => { closePopapka(this.popapka) },
      animation: 'bub'
    })
  }

  render() {
    return (
      <div>
        <PopapkaContainer />
        <button onClick={ this.open }>Open Popapka</button>
      </div>
    )
  }
}

Explain

Place the <PopapkaContainer /> component once into your application tree. It will be used as a wrapper for all modals. Don't forget to import the default styles from react-popapka/dist/index.css

Your component with <PopapkaContainer /> will be like this:

import React, { Component } from 'react'

import { PopapkaContainer } from 'react-popapka';
import 'react-popapka/src/popapka.scss'

class Example extends Component {
  render() {
    return (
      <div>
        <PopapkaContainer />
        // Other components
      </div>
    )
  }
}

Other functions can be called from other components. You don't need to worry about maintaining the global state. Popapka saves its state by itself.

Popapka

Simple usage: Will open a small modal window with just your text

popapka('alert')

Add more functionalities:

popapka({
  title: "this is my modal!!",
  content: (<div>this is content of my modal</div>),
  animation: 'bub'
})

closePopapka

Close popapka by index number of opened popapka. If you only have one popapka, you can simply call closePopapka(0). In complex cases, popapka function return its own index. closePopapka() without parameters will close latest opened popapka.

closeAllPopapka

closeAllPopapka() will close all opened popapka.

API

popapka(parameters, settings);

parameters object:

key	type	default	Description
title	String		Title of popapka. On top of modal and bold highlighted
content	String or jsx		Main text
positiveButton	function		Add 'OK' button at bottom with your callback
animation	one of the below animations	opacity	Animation for appear and disappear popapka
close	inside, outside		Position of close button. Will not be displayed if nothing is passed