https://github.com/antonybudianto/react-save-localstorage

🗄 React component to save data to localStorage on render phase safely
https://github.com/antonybudianto/react-save-localstorage

local-storage localstorage react reactjs render-props

Last synced: about 1 year ago
JSON representation

🗄 React component to save data to localStorage on render phase safely

• Host: GitHub
• URL: https://github.com/antonybudianto/react-save-localstorage
• Owner: antonybudianto
• License: mit
• Created: 2018-11-24T04:33:53.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-08T19:14:59.000Z (over 3 years ago)
• Last Synced: 2025-03-18T01:51:25.537Z (over 1 year ago)
• Topics: local-storage, localstorage, react, reactjs, render-props
• Language: JavaScript
• Homepage:
• Size: 1.79 MB
• Stars: 26
• Watchers: 1
• Forks: 1
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-save-localstorage

[![npm version](https://badge.fury.io/js/react-save-localstorage.svg)](https://badge.fury.io/js/react-save-localstorage)

[![Build Status](https://travis-ci.org/antonybudianto/react-save-localstorage.svg?branch=master)](https://travis-ci.org/antonybudianto/react-save-localstorage)







Save and sync your data on render phase to localStorage safely

> Try it [live at StackBlitz](https://stackblitz.com/edit/demo-react-save-localstorage)

```js

import React, { Component } from 'react';

import SaveLocalStorage from 'react-save-localstorage';

class Home extends Component {

  state = {

    email: ''

  };

  render() {

    return (

      


        {/* Mode 1: read only */}

        

          {lang => 
Language: {lang || '-'}
}

        


        {/* Mode 2: write only */}

        

        {/* Mode 3: dual */}

        

          {v => (

            


              

                  this.setState({

                    email: e.target.value

                  })

                }

              />

              
Welcome, {v || 'Guest'}

            

          )}

        

      

    );

  }

}

```


## Props

- **lsKey** (string, required)

- **value** (string)

- **sync** (bool)

  To sync after value updates, default is `true`

- **children** (func)

  Function that accept loaded **value** from localStorage

- **onSave** (func)

  Function that accept object containing:

  - `init` (boolean that indicated it's the first mount)

  - `value` (the value being saved)

  This is called for every value updates.

## License

MIT