Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

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

1

Version

1.1.1

License

MIT

Unpacked Size

27.8 kB

Total Files

21

Last publish

Collaborators

  • avatar