react-easy-edit
  • ➡️Getting started
  • 🔥Migration Guide to v2.0.0
  • 📖Props
  • 👀Examples
    • Auto Cancelling
    • Auto Submitting
    • Button Positioning
    • Custom Buttons 🔥
    • Custom Display Component
    • Custom Input Component
    • Preventing Edit
    • OnBlur
    • Enable the Delete button 🔥
    • Toggle edit mode for multiple components 🔥
  • 👾Styling
  • 🆗Validation
  • 🤝Contribute
Powered by GitBook
On this page
  • A simple example - Textbox
  • Radio buttons
  • Date
  • Dropdown
  • Datalist
  • Checkboxes

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
/>}
PreviousPropsNextAuto Cancelling

Last updated 6 months ago

👀