@radix-ui/react-context

What is @radix-ui/react-context?

@radix-ui/react-context is a utility for creating and consuming React context with ease. It simplifies the process of managing state and passing data through the component tree without having to pass props down manually at every level.

What are @radix-ui/react-context's main functionalities?

Creating a Context

This feature allows you to create a context and a provider component that can be used to wrap your application or specific parts of it. The provider component supplies the context value to its children.

import { createContext } from '@radix-ui/react-context';

const MyContext = createContext({});

const MyProvider = ({ children }) => {
  const value = { /* some state or functions */ };
  return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
};

Consuming a Context

This feature allows you to consume the context in any component that is a descendant of the provider. You can access the context value using the useContext hook.

import { useContext } from 'react';
import { MyContext } from './MyProvider';

const MyComponent = () => {
  const context = useContext(MyContext);
  return <div>{/* use context values here */}</div>;
};

Other packages similar to @radix-ui/react-context

react

React itself provides the Context API, which @radix-ui/react-context builds upon. The native Context API in React allows you to create and consume context in a similar manner, but @radix-ui/react-context aims to simplify and enhance this process.

unstated-next

unstated-next is a package that provides a simple way to manage state in React using hooks. It offers a similar approach to context management but focuses more on state management using hooks and containers.

recoil

Recoil is a state management library for React that provides a more advanced and flexible way to manage state compared to the Context API. It allows for fine-grained state management and offers features like selectors and atoms.

README

react-context

Installation

$ yarn add @radix-ui/react-context
# or
$ npm install @radix-ui/react-context

Usage

This is an internal utility, not intended for public usage.