npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-ctx-store

v0.9.1

Published

A React context wrapper, which makes context more performant, scalable, and easy to use.

Downloads

4

Readme

react-ctx-store

A React context wrapper, which makes context more performant, scalable and easy to use.

Why?

React context is good, but it is not good for medium to big projects, it has following problems:

  • re-rendering, context re-renders all the subsribers doesn't metter if the subsriber is using the updated property or not.
  • scalability, context has this re-rendering issue, one single store is not possible so multiple context are required.
  • there is not simple way to update the context, it requires a bit of extra code.

NPM JavaScript Style Guide

Install

npm install --save react-ctx-store

Usage

import React, { Component } from 'react'

import { createContext } from 'react-ctx-store'

const store = {
  count: 0,
}

const updaters = {
  updateCount: (store) => {
    return {
      count: store.count + 1;
    }
  }
}

const {Consumer, Provider} = createContext(store, updaters)

function CounterComponent ({count, updateCount}) {
  return (
    <div>
      <span>{count}</span>
      <button onClick={updateCount}>update count</button>
    </div>
  )
}

export function ExampleApp (){
  return (
      <Provider>
        <Consumer mapContextToProps={['count', 'updateCount']}>
          <CounterComponent/>
        </Consumer>
      </Provider>
    )
}

API

import { creatContext } from 'react-ctx-store'

const store = {
  count: 0,
}

// an object of where every key should be an string and value should be a function which will update the store
const updaters = {
  updateCount: (store, ...rest) => {
    return {
      count: store.count + 1;
    }
  }
}

const { Consumer, Provider, connect, useStore, _context } = createContext(
  store,
  updaters
)

react-ctx-store exposes one single method createContext which takes 2 arguments

  • Store - a javascript object.
  • Updaters - an object of functions, only these functions can update the store, every updater function receives store as the first argument, and rest of the argument can be passed by the caller function. To update the store updater function will have to return an updated store value.

createContext returns following Components and methods:

1. Provider

A React component allows consuming components to subscribe to context changes, similar to React Context Provider.

Usage:

function Example() {
  return (
    /* children of the Provider will have access to store and updaters using Provider Component */
    <Provider>
      <App />
    </Provider>
  )
}

2. Consumer

A React Component that subscribe to the values of the store/context. Consumer takes a single prop mapContextToProps which take an array of properties or a callback function as value

Usage:

/* all direct children of Consumer component will receive count as a prop */
<Consumer mapContextToProps={['count']}>...</Consumer>

or

/* all direct children of Consumer component will receive totalCount as a prop */
<Consumer mapContextToProps={({count} => {totalCount: count * 10})}>
  ...
</Consumer>

3. Connect

A method which lets you subscribe to the values of the store/context.

Usage:

/* Component will receive count as a prop*/
const App = connect(['count'])(Component)

or

/* Component will receive count as a prop*/
const App = connect((store) => {count: store.count, update: store.updateCount})(Component)

3. useStore

A hook, which returns store and updaters.

Note: the component using useStore hook will re-render if any value changes in the store.

function WithHooks() {
  const { count, updateCount } = useStore()
  return (
    <div>
      <span>{count}</span>
      <button onClick={updateCount}>Update Count</button>
    </div>
  )
}

4. _context

A React Context object which is being used to store the the values, it is being exposted in cause a user wants to have acess to original Context.

Examples

Async operation in updaters

import { createContext } from 'react-ctx-store'

const store = {
  userData: null
}

const updaters = {
  fetchUserData: async (store, userId) => {
    const userData = await fetch('.../user/' + userId)
    return { userData }
  }
}

const { Consumer, Provider } = createContext(store, updaters)

function UserProfile({ userData, fetchUserData }) {
  useEffect(() => {
    fetchUserData('123')
  }, [])
  return <div>UserName: {userData.name}</div>
}

export function App() {
  return (
    <Provider>
      <Consumer mapContextToProps={['userData', 'fetchUserData']}>
        <UserProfile />
      </Consumer>
    </Provider>
  )
}

License

MIT © aadilhasan