refillable v2.0.1
Take a Snapshot of a form, for better UX.
Introduction
A client filling up the form on your site, Left that window/tab for xyz reasons. When client re-opens that page, Seeing their half filled form is fully empty now. This workflow is normal but we can optimize this. To make better UX!
So, actually instead of client re-enters the past filled information, What if we,
- Store that past half-filled form for specific user and store it!
- Next time user came back to same page, we reteieve that stored form and suggest to accept his/her past filled field values.
Looks interesting? Let's move to the workflow.
Workflow
So the idea is to take a snapshot of form whenever user fill it, No matter if its fully filled or not. Its looks like we are having track of their changes just like google form. but google form uses cloud storage option. However, Not all of the application use that approach.
Google Form doesn't store progress if user is offline
To make this functionality available in offline mode, we are previously using localStorage API to store the form. But now in newer versions (>2.0.0) we are using IndexedDB API as it can also supports Blob storage which is perfect for image/file uploads storage.
Implementation
There are currently two packages for this implementation.
- VanillaJS version (pure/native support)
- ReactJS Specific
If your site uses plain (html + css + js) format, you can move to this alternative
In past version we have introduced useRefillableState
hook, and you have to manually assign value
, onChange
, onBlur
property to each of the input elements. Which is kind of headache for developers. We've also got feedback about this painfull experience.
So, From version(V 2.0.0), it comes with a new powerfull, intelligent custom hook, useRefillableForm
. Now you just need to add ref
attribute to your form and it auto detects all of the nested input
tags itself and assigns curresponding eventListeners to them. to take actions accordingly!
- Enough talking, now code part!!
Install
npm i refillable
Usage
...
import { useRefillableForm } from "refillable";
const MyApp = () => {
const { formRef } = useRefillableForm(configs);
// configs = {threshold?: 50, unique_key?: 'sign_up'}
// Provoding config is completely optional
// threshold is amount in percentage. Only if form is (threshold)% filled, then only save it! (defaults to 50)
return (
<form ref={formRef}>
<input type="text" placeholder="Username" name="username" />
<div className="ui__needed_container">
<a>Terms & Conditions</a>
<div>
<input type="checkbox" name="is_adult" />
</div>
</div>
</form>
)
}
Note
- If you are using
useRefillableState
hook more than once per page (not component), You must assignunique_key
value to differenciate multiple hooks on same page. - This is because it uses current page url as unique identifier to store data and for retrieving also, so it won'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!
License
MIT © spade-official