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)