@restart/context

What is @restart/context?

@restart/context is a lightweight library for managing context in React applications. It provides utilities for creating and managing context providers and consumers, making it easier to share state and functionality across different parts of a React application.

What are @restart/context's main functionalities?

createContext

The `createContext` function is used to create a new context with an optional default value. This context can then be used to provide and consume values throughout the component tree.

const { createContext } = require('@restart/context');
const MyContext = createContext('defaultValue');

useContext

The `useContext` hook allows you to consume the value from a context within a functional component. This is useful for accessing shared state or functionality provided by a context provider.

const { useContext } = require('@restart/context');
const value = useContext(MyContext);

ContextProvider

The `ContextProvider` component is used to provide a value to a context. Any components within the provider's tree can consume this value using the `useContext` hook or the `ContextConsumer` component.

const { ContextProvider } = require('@restart/context');
<ContextProvider value={someValue}>
  <MyComponent />
</ContextProvider>

ContextConsumer

The `ContextConsumer` component allows you to consume the value from a context within a class component or a render prop. This is an alternative to using the `useContext` hook in functional components.

const { ContextConsumer } = require('@restart/context');
<ContextConsumer>
  {value => <div>{value}</div>}
</ContextConsumer>

Other packages similar to @restart/context

react

React itself provides built-in context management through its `createContext`, `useContext`, `Context.Provider`, and `Context.Consumer` APIs. These built-in APIs are widely used and well-documented, making them a robust choice for managing context in React applications.

unstated-next

Unstated Next is a lightweight state management library for React that builds on top of React's context API. It provides a simple way to create and manage state containers, making it easier to share state across components without the boilerplate of Redux or other state management libraries.

recoil

Recoil is a state management library for React that provides a more powerful and flexible way to manage state compared to React's built-in context API. It allows for fine-grained state management and supports features like derived state and asynchronous state updates.

README

@restart/context

React context helpers.

Install

npm install @restart/context

Usage

import React from 'react';
import mapContextToProps from '@restart/context/mapContextToProps';

const MyValueContext = React.createContext(null);

function MyComponent(props) {
  /* ... */
}

const MyComponentWithMyValue = mapContextToProps(
  MyValueContext,
  myValue => ({ myValue }),
  MyComponent,
);

const withMyValue = Component =>
  mapContextToProps(
    {
      consumers: MyValueContext,
      mapToProps: myValue => ({ myValue }),
      displayName: `withMyValue(${Component.displayName || Component.name})`,
    },
    Component,
  );