@bento/box

box

The @bento/box package provides the shared React context that is used throughout the Bento component ecosystem.

Installation

To install the package, use the following command:

npm install --save @bento/box

Context

import { Box } from '@bento/box';

The Box context is a React context that provides Bento-specific configuration to child components. It is typically used internally and does not require direct interaction in most cases.

• slots: An object used by the @bento/slots and @bento/use-props packages.
• env: An object used by the @bento/environment component.

The Box context is used to pass down the Bento specific configuration down to the child components. This is done automatically for you, for the majority of the cases you don't need to interact or use this context directly in your application.

<Source language='tsx' code={ SourceNamespace } />

The above example would output the following:

defaults

The package exposes a defaults function that will return the default assigned values for the Box context. You can use this if you need to provide your components with a custom Box.Provider

import { Box, defaults } from '@bento/box';
import { useContext } from 'react';

function MyComponent() {
  return (
    <Box.Provider value={defaults()}>
      <MyChildComponent />
    </Box.Provider>
  );
};

Slots

The Box context contains a slots object which is consumed by the @bento/slots and @bento/use-props packages. This object contains the following properties:

Env

The env object contains @bento/environment specific configuration. The object contains the following properties: