Newlywed Party Monsters

    @blackbox-vision/rff-persistence
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.0 • Public • Published

    RFF Persistence npm version License: MIT

    React Final Form persistence layer with LocalForage

    Table of contents

    Use Case

    You're working with react-final-form and you need a persistence layer for your forms values.

    Compatibility

    Since this package uses hooks under the hood, you need at least a minimum React version of 16.8.0.

    Installation

    YARN

    yarn add @blackbox-vision/rff-persistence

    NPM

    npm install --save @blackbox-vision/rff-persistence

    Example Usages

    After reading and performing the previous steps, you should be able to import the library and use it like in this example:

    import React from 'react';
    import { Form } from 'react-final-form';
    import { FinalFormPersist } from '@blackbox-vision/rff-persistence';
    
    const MyForm = props => {
      const initialValues = Storage.getItem('example', { isSessionStorage: false });
    
      return (
        <Form
          onSubmit={values => alert(values)}
          render={({ handleSubmit }) => (
            <>
              <form onSubmit={handleSubmit}>{/** your form code **/}</form>
              <FinalFormPersist
                isSessionStorage={false}
                formName="example"
                ttl={250000}
              />
            </>
          )}
        />
      );
    };
    
    MyForm.displayName = 'MyForm';
    
    export default MyForm;

    Component APIs

    FinalFormPersist

    The FinalFormPersist component has the following props:

    Properties Types Default Value Description
    isSessionStorage boolean false Flag to determine if use session-storage as persistence layer
    formName string - Name of the form to save to the storage
    ttl number - Flag to set cache duration

    Storage

    The Storage class has the following methods:

    setItem

    A function that takes some parameters and persist values in session or local storage.

    Parameters
    • key: string - the key associated to the value to persist
    • values: object - the values to persist
    • options: StorageConfig
      • isSessionStorage: boolean - flag that enables persistence in session storage
      • ttl: number - number that determines the time to persist the values in cache

    getItem

    A function that takes some parameters and retrieves values from session or local storage.

    Parameters
    • key: string - the key associated to the persisted value
    • options: StorageConfig
      • isSessionStorage: boolean - flag that retrieves the values from session storage

    Issues

    Please, open an issue following one of the issues templates. We will do our best to fix them.

    Contributing

    If you want to contribute to this project see contributing for more information.

    License

    Distributed under the MIT license. See LICENSE for more information.

    Install

    npm i @blackbox-vision/rff-persistence

    DownloadsWeekly Downloads

    1

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    14.9 kB

    Total Files

    12

    Last publish

    Collaborators

    • jonatansalas
    • manutuero