react-easy-edit
Search…
Examples

A simple example - Textbox

1
import React, { Component } from 'react';
2
import EasyEdit, {Types} from 'react-easy-edit';
3
​
4
function App() {
5
6
const save = (value) => {alert(value)}
7
const cancel = () => {alert("Cancelled")}
8
​
9
return (
10
<EasyEdit
11
type={Types.TEXT}
12
onSave={save}
13
onCancel={cancel}
14
saveButtonLabel="Save Me"
15
cancelButtonLabel="Cancel Me"
16
attributes={{ name: "awesome-input", id: 1}}
17
instructions="Star this repo!"
18
/>
19
);
20
}
Copied!

Radio buttons

1
<EasyEdit
2
type="radio"
3
value="one"
4
onSave={save}
5
options={[
6
{label: 'First option', value: 'one'},
7
{label: 'Second option', value: 'two'}]}
8
instructions="Custom instructions"
9
/>
Copied!

Date

1
<EasyEdit
2
type="date"
3
onSave={save}
4
instructions="Select your date of birth"
5
/>
Copied!
1
<EasyEdit
2
type="select"
3
options={[
4
{label: 'First option', value: 'one'},
5
{label: 'Second option', value: 'two'}]}
6
onSave={save}
7
placeholder="My Placeholder"
8
instructions="Custom instructions"
9
/>
Copied!

Datalist

1
<EasyEdit
2
type="datalist"
3
options={[
4
{label: 'First option', value: 'one'},
5
{label: 'Second option', value: 'two'}]}
6
onSave={save}
7
instructions="Custom instructions"
8
/>
Copied!

Checkboxes

1
<EasyEdit
2
type="checkbox"
3
options={[
4
{label: 'First option', value: 'one'},
5
{label: 'Second option', value: 'two'}
6
]}
7
onSave={save}
8
value={['one', 'two']} // this will preselect both options
9
/>}
Copied!