• Stars
    star
    375
  • Rank 109,850 (Top 3 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 6 years ago
  • Updated about 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

๐Ÿ’พ Persist and rehydrate a Formik form to localStorage

Formik Persist

Persist and rehydrate a Formik form.

npm install formik-persist --save

Basic Usage

Just import the <Persist > component and put it inside any Formik form. It renders null!

import React from 'react'
import { Formik, Field, Form } from 'formik'
import { Persist } from 'formik-persist'

export const Signup = () =>
  <div>
    <h1>My Cool Persisted Form</h1>
    <Formik
      onSubmit={values => console.log(values)}
      initialValues={{ firstName: '', lastName: '', email: '' }}
      render={props =>
        <Form className="whatever">
          <Field name="firstName" placeholder="First Name" />
          <Field name="lastName" placeholder="Last Name" />
          <Field name="email" type="email" placeholder="Email Address" />
          <button type="submit">Submit</button>
          <Persist name="signup-form" />
        </Form>}
    />
  </div>;

Props

Only three props!

  • name: string: LocalStorage key to save form state to
  • debounce:? number: Default is 300. Number of ms to debounce the function that saves form state.
  • isSessionStorage:? boolean: default is false . Send if you want Session storage inplace of Local storage

Author

Todo

  • Alternative storages (localForage)
  • Support AsyncStorage for React Native

More Repositories

1

formik

Build forms in React, without the tears ๐Ÿ˜ญ
TypeScript
33,438
star
2

tsdx

Zero-config CLI for TypeScript package development
JavaScript
11,131
star
3

razzle

โœจ Create server-rendered universal JavaScript applications with no configuration
JavaScript
11,090
star
4

backpack

๐ŸŽ’ Backpack is a minimalistic build system for Node.js projects.
JavaScript
4,470
star
5

the-platform

Web. Components. ๐Ÿ˜‚
TypeScript
4,406
star
6

after.js

Next.js-like framework for server-rendered React apps built with React Router
TypeScript
4,134
star
7

react-fns

Browser API's turned into declarative React components and HoC's
TypeScript
3,739
star
8

awesome-react-render-props

Awesome list of React components with render props
1,366
star
9

cypress-image-snapshot

Catch visual regressions in Cypress
JavaScript
874
star
10

presspack

๐Ÿ’ป Wordpress like it's 2022 with Webpack and Docker
JavaScript
689
star
11

react-parcel-example

Minimum viable React app with Parcel Bundler
JavaScript
485
star
12

minimum-viable-saas

A multi-tier membership SaaS in less than 500 lines of code w/Stripe and Firebase
JavaScript
442
star
13

mutik

A tiny (495B) immutable state management library based on Immer
TypeScript
325
star
14

typescript

TypeScript coding guidelines & configs for Formik
JavaScript
284
star
15

react-conf-2018

React Conf 2018 Source Code for "Moving to Suspense" Demo
JavaScript
226
star
16

tsdx-monorepo

A really good starting point for your next React x TypeScript monorepo
TypeScript
176
star
17

react-email-workflow

Newsletter design tool
JavaScript
175
star
18

formik-effect

Declarative component for managing side-effects in Formik forms. 580 bytes
TypeScript
166
star
19

formover

Build forms that pop bottles ๐Ÿพwith Formik and React Popper
TypeScript
160
star
20

react-simple-infinite-scroll

A brutally simple react infinite scroll component
TypeScript
141
star
21

react-persist

๐Ÿ’พ Persist and rehydrate React state to localStorage.
JavaScript
124
star
22

nextra-blank-custom-theme

A forkable Next.js site w/ a blank custom Nextra theme (w/Tailwind)
JavaScript
108
star
23

hyperhue

๐ŸŒˆ A fun HyperTerm theme that responds to your Philips Hue lights
JavaScript
103
star
24

reason-react-native-web-example

Razzle + Reason-React + React-Native-Web. Damn that's a lot of R's.
Reason
100
star
25

disco.chat

Add real-time ephemeral chat to any webpage.
TypeScript
93
star
26

react-router-nextjs-like-data-fetching

Demonstrating React Router 4's SSR awesomeness
JavaScript
89
star
27

dotfiles

My setup
Shell
50
star
28

razzle-react-vue-elm-php-lol

๐Ÿ”ฅ Blazing fast Razzle app with React, Vue, PHP, and Elm + HMR
JavaScript
50
star
29

formik-alicante

Formik slides & demos from React Alicante
JavaScript
46
star
30

react-suspense-playground

Stock Market News app w/ React Suspense
JavaScript
43
star
31

razzle-unrouted

Blazingly fast server-rendered MVC Webapps with Preact and Webpack
JavaScript
42
star
32

nextjs-langchain-example

Demo of using LangChain.js with Next.js and Vercel Edge Functions (to stream the response)
TypeScript
42
star
33

codemods

Collection of codemods for TypeScript and JavaScript codebases
JavaScript
41
star
34

framer-electron-preview

Quickly run Framer prototypes within Electron.
JavaScript
35
star
35

country-fns

๐ŸŒ Useful country data for forms and stuff.
JavaScript
34
star
36

TIL

๐Ÿ“–Trying to document some of my learnings
30
star
37

squeezy

1 kB React component for accessible accordions / collapse UI
TypeScript
30
star
38

react-europe-2019

Slides and demo app from my keynote
JavaScript
29
star
39

jpjs

Some TypeScript utils
TypeScript
21
star
40

emotion-jsxstyle

jsxstyle primitives powered by emotion
JavaScript
20
star
41

react-router-suspense-demo

React Suspense x React Router Exploration
JavaScript
17
star
42

nextjs-route-handler-email

Experimenting with react.email and Next.js 13 Route Handlers
TypeScript
16
star
43

react-snippets

My React snippets for JavaScript and TypeScript
13
star
44

jaredpalmer.github.io

TypeScript
12
star
45

framer-router

A little routing solution for Framer.js
CoffeeScript
11
star
46

thinkaboutthis.fm

Source code for thinkaboutthis.fm
TypeScript
11
star
47

formik-bloomberg-talk

Slides and examples from my talk at Bloomberg on October 31, 2019
JavaScript
10
star
48

jaredpalmer-vscode-extensionpack

All of my VS Code extensions .... in one extension pack
9
star
49

electron-starter

A minimal Electron starter
JavaScript
8
star
50

babel-preset-react-ts

Create React App's Babel 7 Preset, plus TypeScript
JavaScript
7
star
51

noirny

Website for Noir New York (formerly the lately). Opening 11/21/19
TypeScript
7
star
52

jest-jsxstyle

๐Ÿƒ Jest utilities for JSXStyle
JavaScript
6
star
53

flask-vercel

Python
6
star
54

jaredpalmer

it me.
5
star
55

saas-subdomain-nginx-node-docker

Example setup of SaaS-like user subdomains using Express, NGINX, and Docker Compose
JavaScript
5
star
56

juice.now.sh

Automattic's Juice CSS inliner as a microservice
HTML
4
star
57

datocms-next-js-blog-demo-9687

JavaScript
4
star
58

react-error-overlay-razzle-bug

JavaScript
3
star
59

glamor-jsxstyle

Future home of glamor-jsxstyle
JavaScript
3
star
60

reactnyc-formik

๐Ÿ“ˆ Formik presentation at the August React NYC meetup @Spotify
JavaScript
3
star
61

bf-solid-addons

Helpful addons to Buzzfeed's Solid CSS Framework
CSS
2
star
62

codesandbox-template-next.js

Next.js template for CodeSandbox Projects
TypeScript
2
star
63

framer-electron

Prototype desktop apps with Framer.js and Electron with your own editor.
JavaScript
2
star
64

formik-docs

WIP. Formik docs website
TypeScript
2
star
65

oss-deck

JavaScript
1
star
66

downshift-razzle-bug

JavaScript
1
star
67

next-back-button-error

JavaScript
1
star
68

notion-api-worker

Notion as CMS with easy API access
TypeScript
1
star
69

flask-pipenv-example

Python
1
star
70

os-today

A list a of the GitHub repos you should be using.
JavaScript
1
star
71

blocks

TypeScript
1
star
72

ci-info

Go
1
star
73

hyperneon

Hyperterm theme that rotates neon colors
JavaScript
1
star
74

urql

Universal React Query Library
TypeScript
1
star