React Dialogify

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

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