React

Installation

1npm i named-context-react

API

1const 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

1import { createNamedContext } from 'named-context-react';
2
3const { DataContext, DataProvider, DataConsumer, useData } = createNamedContext(
4  { name: 'Data', defaultValue: 0 }
5);

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

1import { createNamedContext, valueType } from 'named-context-react';
2
3const { DataContext, DataProvider, DataConsumer, useData } = createNamedContext(
4  { name: 'Data', defaultValue: valueType<number>() }
5);
6
7// ...
8
9<DataContext.Provider value={1} />
10// or
11<DataProvider value={1} />
12/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
13  `value` prop expects a value of type `number` (as specified in `valueType` function)
14*/
15
16// ...
17
18const data = useData();
19/* ^^^^^^^^^^^^^^^^^^^^
20  `data` is of type `number` (as specified in `valueType` function)
21  If `useData` is used outside `DataContext.Provider` or `DataProvider` or if `value` prop is not passed, an error will be throw
22*/

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

1import { createNamedContext, valueType } from 'named-context-react';
2
3const { NullishContext, NullishProvider, NullishConsumer, useNullish } = createNamedContext(
4  { name: 'Nullish', defaultValue: valueType<string>(), isNullishAllowed: true }
5);
6
7// ...
8
9<NullishContext.Provider value={undefined} />
10// or
11<NullishProvider value={''} />
12/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
13  `value` prop expects a value of type `string` (as specified in `valueType` function) or `undefined` (because `isNullishAllowed` is `true`)
14*/
15
16// ...
17
18const data = useNullish();
19/* ^^^^^^^^^^^^^^^^^^^^^^^
20  `data` is of type `string` (as specified in `valueType` function) or `undefined` (because `isNullishAllowed` is `true`)
21*/