https://github.com/loopmode/react-provide-forage

HOC and decorator for feeding localforage values to react components
https://github.com/loopmode/react-provide-forage

Last synced: 4 days ago
JSON representation

HOC and decorator for feeding localforage values to react components

• Host: GitHub
• URL: https://github.com/loopmode/react-provide-forage
• Owner: loopmode
• Created: 2018-03-30T19:47:28.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-12-05T09:03:59.000Z (almost 6 years ago)
• Last Synced: 2024-11-01T04:52:19.212Z (14 days ago)
• Language: JavaScript
• Size: 30.3 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# 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:

```javascript

import React, { Component } from 'react';

import ProvideForage from 'react-provide-forage'

import localforage from 'localforage';

export default class MyComponent extends Component {

    render() {

        return ( 

            

                

             

        );

    }

}

```

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:

```javascript

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 ( 

             

        );

    }

}

```

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

```javascript

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 ( 

             

        );

    }

}

export default withForage(MyComponent)

```