Examples
A simple example - Textbox
import React, { Component } from 'react';
import EasyEdit, {Types} from 'react-easy-edit';
function App() {
const save = (value) => {alert(value)}
const cancel = () => {alert("Cancelled")}
return (
<EasyEdit
type={Types.TEXT}
onSave={save}
onCancel={cancel}
saveButtonLabel="Save Me"
cancelButtonLabel="Cancel Me"
attributes={{ name: "awesome-input", id: 1}}
instructions="Star this repo!"
/>
);
}
Radio buttons
<EasyEdit
type="radio"
value="one"
onSave={save}
options={[
{label: 'First option', value: 'one'},
{label: 'Second option', value: 'two'}]}
instructions="Custom instructions"
/>
Date
<EasyEdit
type="date"
onSave={save}
instructions="Select your date of birth"
/>
Dropdown
<EasyEdit
type="select"
options={[
{label: 'First option', value: 'one'},
{label: 'Second option', value: 'two'}]}
onSave={save}
placeholder="My Placeholder"
instructions="Custom instructions"
/>
Datalist
<EasyEdit
type="datalist"
options={[
{label: 'First option', value: 'one'},
{label: 'Second option', value: 'two'}]}
onSave={save}
instructions="Custom instructions"
/>
Checkboxes
<EasyEdit
type="checkbox"
options={[
{label: 'First option', value: 'one'},
{label: 'Second option', value: 'two'}
]}
onSave={save}
value={['one', 'two']} // this will preselect both options
/>}
Last updated