Nodular Pudding Multiverse

    react-dialogify

    1.1.1 • Public • Published

    React Dialogify

    Version React Downloads License

    React-Dialogify allows you to add dialogs to your app, fast and easy.

    screen shot

    Features

    • Super fast setup - Plug & Play.
    • Customizable - Use with predefined styles or use your own.
    • Programmatically controlled - With a couple of functions you can make it show/close from anywhere in your app.
    • No Redux/State required - Don't need to set Actions or States in your App to control it.

    Installation

    $ yarn add react-dialogify
    or
    $ npm install --save react-dialogify
    

    Usage

    Add the DialogContainer at the root level of your App, or as children of any specific container in your App. But remember to add it only once in your App.

    import React, { Component } from 'react';
    import { DialogContainer, dialog } from 'react-dialogify';
    
    class App extends Component {
      showDialog = () => {
        dialog.show({
            title: 'Hello World!'
            text: 'This is your text in the dialog'
        });
      }
    
      render() {
        return (
            <div>
              <button onClick={this.showDialog}> Show Dialog </button>
              <DialogContainer />
            </div>
        );
      }
    }
    

    Using default dialog with predefined types

    Methods

    Method Description
    success Display default dialog with the success context (color green)
    error Display default dialog with the error context (color red)
    warning Display default dialog with the warning context (color gold)
    pending Display default dialog with the pending context (color light blue)
    info Display default dialog with the info context (color blue)
    close Close the dialog

    Example:

    dialog.info({
      title: 'News! Some tips!',
      text: 'Read this! This dialog shows you some useful info!',
      btnText: 'Close me now!',
      btnOnClick() { dialog.close(); },
    });
    

    Required options

    Name Type Description
    title String Displayed as title in the dialog
    text String Displayed as content in the dialog
    btnText String Displayed as text in the dialog's button
    btnOnClick function Method called in the onClick event of the dialog's button

    Using a custom dialog component

    You are able to use your own Dialog React Component, you just need to make sure your component takes the options as props. There are two ways:

    1. Passing the Component to DialogContainer as a Prop

    When you setup the DialogContainer in your App, you can pass to it the prop template to use a custom Dialog Component.

    Example:

    // App.js
    import MyComponent from './my-component';
    
    // ..... //
    
    render() {
      return (
          <div>
            <button onClick={this.showDialog}> Show Dialog </button>
            <DialogContainer template={MyComponent} />
          </div>
      );
    }
    

    2. Passing the Component Argument

    The show method takes as a second argument a React Component, the DialogContainer will pass the options argument as props to your Component, this way you can change the Dialog component on the fly! Your component can take any props you decide :)

    Example:

    // App.js
    import MyComponent from './my-component';
    
    // ..... //
    showDialog = () => {
      dialog.show({
          headline: 'Custom prop',
          content: 'Custom prop',
          cancelBtnText: 'Custom prop',
          submitBtnText: 'Custom prop'
      }, MyComponent);
    }
    render() {
      return (
          <div>
            <button onClick={this.showDialog}> Show Dialog </button>
            <DialogContainer />
          </div>
      );
    }
    

    Demo

    You want to see some examples? Go to Online Demo

    Install

    npm i react-dialogify

    DownloadsWeekly Downloads

    17

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    27.8 kB

    Total Files

    21

    Last publish

    Collaborators

    • iamgutz