@infini-soft/hooks-draft v0.0.16

Getting started

Immutable Memento/Draft State React Hook. Using memento pattern, this tiny ~3k package adds up handy states to anything. You can change, undo, redo, draft, clear, commit, reset. Have status isDirty and if operation are available.

✨ Features

• No dependency
• Very small ~3K
• Store any state
• Undo
• Redo
• Commit
• Clear
• Reset
• Typescript / Javascript

📚 Documentation

Get all documentations, examples and execute it directly from our website, the ☕ kitchen! Come cook software :) https://www.kitchen.infini-soft.com/hooks/draft

📦 Install

$ npm install @infini-soft/hooks-draft --save
# or
$ yarn add @infini-soft/hooks-draft

🔨 Usage

import React from 'react';
import { useDraft } from '@infini-soft/hooks-draft'

export default () => {
  const { data, draft, commit, clear, undo, redo, onChange, isDirty, reset } =
    useDraft('I love Infini-soft :)');

  return (
    <div className="root">
      <h1>Draft Example</h1>

      <div>Dirty = {String(isDirty)}</div>

      <div>Data = {data}</div>
      <div>Draft = {draft}</div>
    
      <input
        type="text"
        placeholder="change me..."
        onChange={(e) => onChange(e.target.value)}
        value={draft}
      />

      <button onClick={commit.run} disabled={commit.disabled}>
        Commit
      </button>

      <button onClick={clear.run} disabled={clear.disabled}>
        Clear
      </button>

      <button onClick={reset.run} disabled={reset.disabled}>
        Reset
      </button>

      <button onClick={undo.run} disabled={undo.disabled}>
        Undo
      </button>

      <button onClick={redo.run} disabled={redo.disabled}>
        Redo
      </button>
    </div>
  );
};

Powered 🚀 by Infinisoft Inc. Wanna cook the future? Come in the kitchen https://www.kitchen.infini-soft.com