Skip to content

PixelsCommander/QuickContext

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 

QuickContext

ContextAPI state management made easy

NPM JavaScript Style Guide

Install

npm install --save quickcontext

Usage

Changing values in a context as simple as:

this.context.store.value = newValue;

Your context module:

import {createContext} from 'quickcontext';

const eContext = createContext({
  clicks: 0,
});

export const Context = eContext.Context;
export const Consumer = eContext.Consumer;
export const Provider = eContext.Provider;

Your app:

import {Provider} from './Context';
import {Component} from './Component';

export const App = () =>
  <Provider>
    <Component/>
  </Provider>

Your component:

import React from 'react';
import {Context} from './Context';

export class Component extends React.Component {
  click = () => this.context.store.clicks = Math.random()

  render() {
    return <React.Fragment>
      <button onClick={this.click}/>
      Clicked: {this.context.store.clicks}<br/>
    </React.Fragment>
  }
}

Component.contextType = Context;

For more information have a look at example.

License

MIT © PixelsCommander

About

ContextAPI state management made Easy. Less code more performance.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published