A component that wraps around a form component to provide an editing state that it maintains. Works with promises returned by the Editable methods.

React Editable can accept anything as its value, making it a generic wrapper for any controlled component that needs a temporary editing state.

React Editable factors out the concerns of temporary state and whether to maintain it in a global store like Redux, or in your own component. It passes through its current state so you can render your component differently depending on whether it's inactive, editing, or waiting on a promise.

Live demo: https://dcwither.github.io/react-editable/

npm install
npm start

Then open localhost:6006 in a browser

import React from "react";
import { Editable, useEditableContext } from "@dcwither/react-editable";

function Input() {
  const { value, onCommit, onChange, status } = useEditableContext();
  handleCommit = () => {
    onCommit("SUBMIT");
  };

  handleChange = evt => {
    onChange(evt.target.value);
  };

  return (
    <div>
      <input
        className="input"
        disabled={status === EditableStatus.COMMITTING}
        onChange={handleChange}
        value={value}
      />
      <button onClick={handleCommit}>Submit</button>
    </div>
  );
}

// Either wrap in the Editable Component with render props
<Editable onCommit={handleCommit}>
  <Input />
</Editable>;

// Or control the flow of your editable props directly with:
const { value, onChange, onCommit } = useEditable({
  value,
  onChange,
  onCommit
});

None

None

This will be called when the matching callback passed through to the render prop child is called. If it returns a promise, ReactEditable will remain in a COMITTING state until the promise resolves. If ReactEditable unmounts before the promise resolves, it will cancel its promise, and avoid a setState.