https://github.com/mattstypa/kedge

Easy to use global state hook for React.
https://github.com/mattstypa/kedge

Last synced: 18 days ago
JSON representation

Easy to use global state hook for React.

• Host: GitHub
• URL: https://github.com/mattstypa/kedge
• Owner: MattStypa
• License: mit
• Created: 2018-11-01T13:10:16.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T01:35:27.000Z (about 2 years ago)
• Last Synced: 2024-08-08T19:16:15.989Z (5 months ago)
• Language: JavaScript
• Size: 937 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Kedge

[![Build Status](https://travis-ci.org/MattStypa/kedge.svg?branch=master)](https://travis-ci.org/MattStypa/kedge)

[![Latest Stable Version](https://img.shields.io/npm/v/kedge.svg)](https://www.npmjs.com/package/kedge)

[![Total Downloads](https://img.shields.io/npm/dt/kedge.svg)](https://www.npmjs.com/package/kedge)

[![License](https://img.shields.io/npm/l/kedge.svg)](https://www.npmjs.com/package/kedge)

Easy to use global state hook for React.

![Kedge](https://raw.githubusercontent.com/MattStypa/assets/master/kedge/kedge.png)

[Read a little bit more here.](https://medium.com/@mattstypa/global-react-hook-usestate-86e6dd78a635)

## Installation

```

npm install kedge

```

## Usage

```

import { createStore, useStore } from 'kedge';

const priceStore = createStore();

function PriceComponent() {

  const price = useStore(priceStore);

  useEffect(fetchPrice, []);

  return (

    


      Price: { price }

    

  );

}


function fetchPrice() {

  priceStore.set(73);

}

```

## API

  - #### `const store = createStore(initialState, optionalName)`

  Creates a `Store` with initial value. Optionally, it accepts a store name that is used in React Dev Tools

  - #### `const state = useStore(store)`

  Returns current state from the `Store` and subscribes the component to it. If the `Store` changes state the component will re-render.

  - #### `Store.set(newState)`

  Sets `Store` state and re-renders all components that use it.

  - #### `Store.reset()`

  Sets `Store` to initial value and re-renders all components that use it.