use-refillable-state v1.0.2

Take a Snapshot of a form, for better UX.

Purpose

You go on a site, having a form with several fields. Because of several circumstances you left that site, when you visit again that aggghhhh.... feeling of filling that already filled values makes anger against site 😂.

So whats the possible solution??

What if on every decided logical steps we save that draft locally, and discard when user submits (DEPENDS ON USE CASES). if user doesnt submitted, its still saved draft that can be retrieved afterwards when needed.

Install

npm i use-refillable-state

Live Playable Demo

Launch on CodeSandBox

Usage

...
import { Fragment } from "react"

import useRefillableState from 'use-refillable-state'

function MyCustomForm() {
  
  const { currentState, setCurrentState, acceptDraft, discardDraft, showingDraft, saveState } = useRefillableState({username: '',
                                                                                                                    user_agree_tnc: false,
                                                                                                                    ...})
  
   const handleFormSubmit = (e) => {
   
    e.preventDefault(); // Prevents from redirecting page
    discardDraft(); // In this case it deletes Saved Draft bcz now we dont need this because user filled this form and submitted now!
   
   }
  
  return (
    <Fragment>
      
      //Show Notice for accept/discard saved draft
      {showingDraft && 
        <div>
          Accept Changes? 
          <button onClick={acceptDraft}>Accept</button>
          <button onClick={discardDraft}>Discard</button> 
         </div>
      }
    
      <form onSubmit={handleFormSubmit}>

        <input
          onBlur={saveState}
          type="text"
          placeholder="Username"
          value={currentState.username}
          onChange={(e) => { setCurrentState({...currentState, username: e.target.value}) }} 
         />

         <label for="agreetnc">Agree Terms & Conditions?</label> 
         <input 
           name="agreetnc"
           id="agreetnc"
           type="checkbox"
           value={currentState.username}
           onChange={(e) => { setCurrentState({...currentState, username: e.target.value}) }}
         />

          {
          //Other bunch of inputs in this form continues...
          }



         <button type="submit">Submit</button>

      </form>
    </Fragment>
  
  )

  
}

export default MyCustomForm;

Note

• Use this hook only once per page eg.. (1 for homePage("/home"), 1 for room("/home/room"), and so on...)
• This is because it uses current page url as unique identifier to store data and for retrieving also, so i doesn't collide

Author

👤 Spade Dev(s)

• Website: www.spadebeta.in
• Twitter: @spade_community
• Github: @spade-official

Show your support

Give a ⭐️ if this project helped you!

This README was generated with ❤️ by readme-md-generator

License

MIT © spade-official