@radix-ui/react-context

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>;
};