react-editable-hooks

Hooks for managing editable field state

Install

npm install --save react-editable-hooks

Usage

import * as React from "react";
import { useEditableState } from "react-editable-hooks";

const EditableTextField = ({ value, onValueChanged }) => {
  const {
    onEditBegin,
    onEditConfirm,
    onEditCancel,
    isEditing,
    editValue,
    setEditValue,
    useDraft,
    hasDraft
  } = useEditableState({
    value,
    onValueChanged,
    localStorageKey: "ui.drafts.my-test-field"
  });

  if (isEditing) {
    return (
      <>
        <input
          className="content"
          value={editValue}
          onChange={e => setEditValue(e.target.value)}
        />
        <button onClick={onEditConfirm}>Confirm</button>
        <button onClick={onEditCancel}>Cancel</button>
      </>
    );
  } else {
    return (
      <>
        <span>{value}</span>
        <button onClick={onEditBegin}>Edit</button>
        {hasDraft ? <button onClick={useDraft}>Load draft</button> : null}
      </>
    );
  }
};

License

MIT © cameronfletcher92