Named-context-react NPM

React

Installation

npm i named-context-react

API

const values = createNamedContext(params);

params

Property	Default value	Description
`name`	-	Name of your context. Use as prefix or postfix in returned values
`defaultValue`	-	Default value of your context
`isNullishAllowed`	`false`	Property that allows the use of `nullish` values in context

values

Property	Description
`${params.name}Context`	Object that includes `Provider` and `Consumer` components
`${params.name}Provider`	`Context.Provider` component. Alias for `${params.name}Context.Provider`
`${params.name}Consumer`	`Context.Consumer` component. Alias for `${params.name}Context.Consumer`
`use${params.name}`	Hook to work with data from `${params.name}Context`

Usage

Create context with defined `defaultValue`

import { createNamedContext } from 'named-context-react';

const { DataContext, DataProvider, DataConsumer, useData } = createNamedContext(
  { name: 'Data', defaultValue: 0 }
);

Create context without defined `defaultValue`

If you do not want to pass defaultValue when creating a context, use helper function valueType to specify type of value you expect

import { createNamedContext, valueType } from 'named-context-react';

const { DataContext, DataProvider, DataConsumer, useData } = createNamedContext(
  { name: 'Data', defaultValue: valueType<number>() }
);

// ...

<DataContext.Provider value={1} />
// or
<DataProvider value={1} />
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  `value` prop expects a value of type `number` (as specified in `valueType` function)
*/

// ...

const data = useData();
/* ^^^^^^^^^^^^^^^^^^^^
  `data` is of type `number` (as specified in `valueType` function)
  If `useData` is used outside `DataContext.Provider` or `DataProvider` or if `value` prop is not passed, an error will be throw
*/

If undefined or null value should be allowed, set isNullishAllowed param to true

import { createNamedContext, valueType } from 'named-context-react';

const { NullishContext, NullishProvider, NullishConsumer, useNullish } = createNamedContext(
  { name: 'Nullish', defaultValue: valueType<string>(), isNullishAllowed: true }
);

// ...

<NullishContext.Provider value={undefined} />
// or
<NullishProvider value={''} />
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  `value` prop expects a value of type `string` (as specified in `valueType` function) or `undefined` (because `isNullishAllowed` is `true`)
*/

// ...

const data = useNullish();
/* ^^^^^^^^^^^^^^^^^^^^^^^
  `data` is of type `string` (as specified in `valueType` function) or `undefined` (because `isNullishAllowed` is `true`)
*/

react context

@everything-registry/sub-chunk-2243

1.0.1

3 months ago

1.0.0

1 year ago