Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

react-provide-forage

0.0.4 • Public • Published

react-provide-forage

A higher-order-componennt and a decorator for providing localforage values to react components.

Usage

Component

If you want to provide localforage data to child components in the JSX tree you control, you can use the component:

import React, { Component } from 'react';
import ProvideForage from 'react-provide-forage'
import localforage from 'localforage';
 
export default class MyComponent extends Component {
    render() {
        return ( 
            <ProvideForage storage={localforage} provide="activeIndex">
                <MyTabbedComponent
                    items={this.props.items}
                    foo="bar"
                    bar="baz"
                />
            </ProvideForage> 
        );
    }
}
 

The MyTabbedComponent will receive an additional prop activeIndex as soon as the value is loaded from localforage.

Decorator

If you want to provide data "to yourself", you can use the decorator:

import React, { Component } from 'react';
import { connectForage } from 'react-provide-forage'; 
import localforage from 'localforage';
 
@connectForage(localforage, ['activeIndex'])
export default class MyComponent extends Component {
    static propTypes = {
        activeIndex: PropTypes.number
    };
    render() {
        return ( 
            <MyTabbedComponent
                activeIndex={this.props.activeIndex}
                items={this.props.items}
                foo="bar"
                bar="baz"
            /> 
        );
    }
}
 
 

If you prefer not to use ES7 decorator syntax, you can write the same as:

import React, { Component } from 'react';
import { connectForage } from 'react-provide-forage'; 
import localforage from 'localforage';
 
const withForage = connectForage(localforage, ['activeIndex']);
 
class MyComponent extends Component {
    static propTypes = {
        activeIndex: PropTypes.number
    };
    render() {
        return ( 
            <MyTabbedComponent
                activeIndex={this.props.activeIndex}
                items={this.props.items}
                foo="bar"
                bar="baz"
            /> 
        );
    }
}
 
export default withForage(MyComponent)
 

Install

npm i react-provide-forage

DownloadsWeekly Downloads

1

Version

0.0.4

License

MIT

Unpacked Size

19.6 kB

Total Files

16

Last publish

Collaborators

  • avatar