https://github.com/pavelivanov/context-hooks

React Hooks for accessing state and dispatch from a store
https://github.com/pavelivanov/context-hooks

Last synced: about 1 month ago
JSON representation

React Hooks for accessing state and dispatch from a store

• Host: GitHub
• URL: https://github.com/pavelivanov/context-hooks
• Owner: pavelivanov
• Created: 2019-02-17T11:50:16.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-02-22T10:40:08.000Z (almost 6 years ago)
• Last Synced: 2024-11-15T22:23:21.639Z (about 2 months ago)
• Language: JavaScript
• Size: 186 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# context-hooks

> React Hooks for accessing state and dispatch from a store

[![Npm Version](https://badge.fury.io/js/context-hooks.svg)](https://www.npmjs.com/package/context-hooks)

[![Month Downloads](https://img.shields.io/npm/dm/context-hooks.svg)](http://npm-stat.com/charts.html?package=context-hooks)

[![Bundle Size](https://badgen.net/bundlephobia/minzip/context-hooks@latest)](https://bundlephobia.com/result?p=context-hooks@latest)

## Install

```bash

# Yarn

yarn add context-hooks

# NPM

npm install --save context-hooks

```

## Quick Start

```jsx

// bootstrap your app

import { StoreContext, createStore } from 'context-hooks'

ReactDOM.render(

  

    

  ,

  document.getElementById('root'),

)

```

```jsx

// individual components

import { useReducers, useConntect } from 'context-hooks'

const App = () => {

  const state = useConntect((state) => ({

    count: state.counter.count,

  }))

  

  const { counter } = useReducers()

  return (

    

      Count: {count}


         counter.increase()}>increase count

         counter.decrease()}>decrease count

    

  )

}

```

## Usage

NOTE: React hooks require `react` and `react-dom` version `16.8.0` or higher.

## Example

```js

// reducers

export default {

  counter: {

    initialState: {

      count: 0,

    },

    increase = (state) => ({ count: state.count + 1 }),

    decrease = (state) => ({ count: state.count - 1 }),

  },

}

```

```jsx

// bootstrap your app

import { StoreContext, createStore } from 'context-hooks'

import reducers from './reducers'

const store = createStore(reducers)

ReactDOM.render(

  

    

  ,

  document.getElementById('root'),

)

```

```jsx

// individual components

import { useReducers, useConntect } from 'context-hooks'

const App = () => {

  const state = useConntect((state) => ({

    count: state.counter.count,

  }))

  

  const { counter } = useReducers()

  return (

    

      Count: {count}


         counter.increase()}>increase count

         counter.decrease()}>decrease count

    

  )

}

```