Semantic UI React EZModal

Return of the EZ

Back in Meteor land I had a helpful package called EZModal.

Now in react land (semantic-ui-react land specifically), there was a need for it's return.

Install

1npm install --save sui-react-ezmodal

Usage

See index.js for the full component spec

1import React, { PropTypes, Component } from 'react';
2import { Grid, Segment, Button, Header } from 'semantic-ui-react';
3import EZModal from 'sui-react-ezmodal';
4
5class NetworkConfig extends Component {
6  render() {
7    return (
8      <EZModal
9        initiallyOpens // initially open?
10        // required trigger element
11        trigger={<Button basic icon="plus" content="Do Something Cool" />}
12        // optional data to be passed to content & actions
13        data={{ name: 'bobby' }}
14        // required content element with props passed
15        // `data` is original passed data, `formData` is component state for controlled inputs
16        content={({ data, formData, change, resetFormData, setError, setLoading }) => {
17          return (
18            <Form.Group widths="equal">
19              <Button type="submit" className="hidden" />
20              <Form.Field>
21                <label>Provider Name</label>
22                <Input onChange={change} value={formData.name || ''} name="name" />
23                <Button onClick={resetFormData} text="Reset" />
24              </Form.Field>
25            </Form.Group>
26          );
27        }}
28        // optional bool to show spinner overlay
29        loading
30        // optional actions, hide/submit event handlers passed as props
31        actions={({ hide, submit }) => {
32          return [
33            <Button onClick={hide} key="close" icon="remove" floated="left" content="Cancel" />,
34            <Button onClick={submit} key="submit" icon="checkmark" color="green" content="OK" />,
35          ]
36        }}
37        // optional title header
38        header="This is my new Modal"
39        // callback function after submit. if you return a promise, it will resolve before closing
40        handleSubmit={(data) => console.log(data)}
41        // optional delete button, instead of `actions`
42        handleRemove={(data) => console.log('deleting!', data)}
43        removeHeader="Are you sure?"
44        removeContent={(data) => {
45          return <p>Really remove {data.name}?</p>
46        }}
47      />
48    );
49  }
50}

License

MIT 2016