@ninetynine/react-choice-modal v1.0.1

React Choice Modal

This package provides a choice modal component and styles (scss and css).

Installation

You can install this packge with either npm or yarn.

npm i @ninetynine/react-choice-modal

An example of how to install the package through NPM.

yarn add @ninetynine/react-choice-modal

An example of how to install the package through Yarn.

Be sure to import the styles into your main style file or into your HTML, and import the component if you wish to use it within your project.

import "~@ninetynine/choice-modal/dist/choice-modal"

An example of how to import into scss.

Usage

After importing ChoiceModal you can start to use it. By default the modal has a title and buttons but default, but with the default buttons the props onAgree and onReject are required. Both should be functions.

// const { isOpen } = this.state;

<ChoiceModal
    isOpen={isOpen}
    onAgree={this.onAgree}
    onReject={this.onReject}
/>

An example of the most basic usage.

To trigger the modal to be displayed and hidden the prop isOpen is required. This should be a boolean.

Changing the title

By default the modal has a title that outputs: "Pick an option". You can change this by passing a valid node into the title prop.

// const { isOpen } = this.state;

<ChoiceModal
    isOpen={isOpen}
    onAgree={this.onAgree}
    onReject={this.onReject}
    title={'This will action will delete all records'}
/>

An example of chaging the title with a string.

// const { isOpen } = this.state;

<ChoiceModal
    isOpen={isOpen}
    onRequestClose={() => this.setState({ isOpen: false })}
    onAgree={this.onAgree}
    onReject={this.onReject}
    title={(
    	<BoldText>
    		This will action will delete all records
    	</BoldText>
    )}
/>

An example of chaging the title with a React component.

Changing the options

By default the modal has two buttons that output:

• "Ok"
  • Triggers onAccept
• "Cancel"
  • Triggers onReject

You can change this by passing in an array of shapes (containing: text and onClick) into the buttons prop. A button can also have a boolean of danger which changes the text color to red.

Buttons will be given an equal width, and text overflow will be hidden. If you plan on adding multiple buttons or long text options it is recommended to also pass the title options with each button object.

// const { isOpen } = this.state;

<ChoiceModal
    isOpen={isOpen}
    onAgree={this.onAgree}
    onReject={this.onReject}
    title={(
    	<BoldText>
    		This will action will delete all records
    	</BoldText>
    )}
    buttons={[
        {
            text: 'That\'s okay',
            danger: true,
            onClick: () => console.warn('delete everything')
        },
        {
            text: 'Hell no',
            onClick: () => console.warn('cancel action')
        },
        {
            text: 'Get me the hell out of here',
            title: 'Cancel',
            onClick: () => console.warn('cancel action')
        }
    ]}
/>

An example of chaging the buttons with custom options.

Providing context

The title prop should be kept short and snappy so the user can tell what is going on at a glance. If you need to provide more context about the decision that has to be made you can pass a node into the context prop which will be displayed under the title.

// const { isOpen } = this.state;

<ChoiceModal
    isOpen={isOpen}
    onAgree={this.onAgree}
    onReject={this.onReject}
    title={(
    	<BoldText>
    		This will action will delete all records
    	</BoldText>
    )}
    context={(
    	<p>Once deleted we can not recover the data.</p>
    )}
    buttons={[
        {
            text: 'That\'s okay',
            danger: true,
            onClick: () => console.warn('delete everything')
        },
        {
            text: 'Hell no',
            onClick: () => console.warn('cancel action')
        },
    ]}
/>

An example of adding content with a HTML element.

Implementing a loading state

If you need to carry out an action that may take some time, rather than not showing any indicator to the end user you can pass loading as a boolean. This will then trigger loadingComponent to be displayed (replacing all other content) until loading is set to false. By default loadingComponent outputs: "Loading...".

// const { isOpen, loading } = this.state;

<ChoiceModal
    isOpen={isOpen}
    onAgree={this.onAgree}
    onReject={this.onReject}
    title={(
    	<BoldText>
    		This will action will delete all records
    	</BoldText>
    )}
    context={(
    	<p>Once deleted we can not recover the data.</p>
    )}
    buttons={[
        {
            text: 'That\'s okay',
            danger: true,
            onClick: this.reallyLongProcessingTime
        },
        {
            text: 'Hell no',
            onClick: () => console.warn('cancel action')
        },
    ]}
    loading={loading}
    loadingComponent={(
        <React.Fragment>
            <h3>Hold on tight,</h3>
            <p>Deleteing all records...</p>
        </React.Fragment>
    )}
/>

An example of passing loading and loadingComponent props.