context-x v0.3.0

context-x

How to optimize shared states in React

Examples

• Basic

Installation

with Yarn:

yarn add context-x

with npm:

npm install context-x

Usage

import { createContexts } from "context-x";

const states = {
  count: 0
};

export const contexts = createContexts(states);

import React from "react";
import { Providers } from "context-x";
import { contexts } from "./contexts";
import { Counter } from "./Counter";
import { Increment } from "./Increment";

export default function App() {
  return (
    <Providers contexts={contexts}>
      <Counter />
      <Increment />
    </Providers>
  );
}

import React from "react";
import { useStateContext } from "context-x";
import { contexts } from "./contexts";

export function Counter() {
  const count = useStateContext(contexts, "count");

  return <span>{count}</span>;
}

import React from "react";
import { useSetStateContext } from "context-x";
import { contexts } from "./contexts";

export function Increment() {
  const setCount = useSetStateContext(contexts, "count");

  return <button onClick={() => setCount(prev => prev + 1)}>Increment</button>;
}

License

context-x is licensed under the MIT License