# Examples

### **A simple example - Textbox**

```jsx
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**

```jsx
<EasyEdit
  type="radio"
  value="one"
  onSave={save}
  options={[
      {label: 'First option', value: 'one'},
      {label: 'Second option', value: 'two'}]}
  instructions="Custom instructions"
/>
```

### **Date**

```jsx
<EasyEdit
  type="date"
  onSave={save}
  instructions="Select your date of birth"
/>
```

### **Dropdown**

```jsx
<EasyEdit
  type="select"
  options={[
      {label: 'First option', value: 'one'},
      {label: 'Second option', value: 'two'}]}
  onSave={save}
  placeholder="My Placeholder"
  instructions="Custom instructions"
/>
```

### **Datalist**

```jsx
<EasyEdit
  type="datalist"
  options={[
      {label: 'First option', value: 'one'},
      {label: 'Second option', value: 'two'}]}
  onSave={save}
  instructions="Custom instructions"
/>
```

### **Checkboxes**

```jsx
<EasyEdit
  type="checkbox"
  options={[
      {label: 'First option', value: 'one'},
      {label: 'Second option', value: 'two'}
  ]}
  onSave={save}
  value={['one', 'two']} // this will preselect both options
/>}
```