cb-modal-lib

A modal library that does not require state maintance

Install

npm install --save cb-modal-lib

Live Preview

https://codesandbox.io/s/zen-bogdan-whms4?fontsize=14&hidenavigation=1&theme=dark

Advantages

Create modals wherever you want without having to maintain state variables.

Motivation

The modal libraries in existance such as react-responsive-modal requires users to maintain state variables for the creation of each modal, which can become painful while mainting a large codebase that involves multiple modals. This library eliminates the above problem and lets yours create modals wihout having to create and maintain state variables.

Advantages

Create modals wherever you want without having to maintain state variables.

Motivation

The modal libraries such as react-responsive-modal in existance requires users to maintain state variables for the creation of each modal, which can become painful while mainting a large codebase that involves multiple modals. This library eliminates the above problem and lets yours create modals wihout having to create and maintain state variables.

Usage

import React, { Component } from 'react'
import {open} from 'cb-modal-lib'
import "cb-modal-lib/dist/modalStyle.css";

class Example extends Component {
  openModal = () => {
    open({
      header: () => { // component or string to render header },
      body: () => { // component or string to render body },
      footer: () => { // component or string to render footer },
      styles: () => { // style object to add custom styles to the container},
      clsName: () => { // A custom classname for the modal container}
    })
  }
  render() {
    return <button onClick={this.openModal}>Open Modal</button>
  }
}

The open method will mount the container for you.

Nested modal support

The library additionally gives you the flexibilty of mounting a modal container over an already existing modal. The example below describes the same

import React, { Component } from "react";
import { open } from "cb-modal-lib";
import "cb-modal-lib/dist/modalStyle.css";

export default class App extends Component {
  openModal = () => {
    open({
      head: () => <h2>Random Heading</h2>,
      body: () => (
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
          pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet
          hendrerit risus, sed porttitor quam.
        </p>
      ),
      footer: () => (
        <button onClick={this.openInnerModal}>Open Inner Modal</button>
      )
    });
  };

  openInnerModal = () => {
    open({
      head: () => "Inner Heading",
      body: () => <p>Inner Body</p>,
      footer: () => <p>Inner Footer</p>
    });
  };

  render() {
    return (
      <div>
        <h1>Modal demo</h1>
        <button onClick={this.openModal}>Show</button>
      </div>
    );
  }
}

License

MIT © Sigkill32