@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
- Triggers
- "Cancel"
- Triggers
onReject
- Triggers
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.