1.0.0 • Published 1 year ago

named-context-solid v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

Solid

Installation

npm i named-context-solid

API

const values = createNamedContext(params);

params

PropertyDefault valueDescription
name-Name of your context. Use as prefix or postfix in returned values
defaultValue-Default value of your context
isNullishAllowedfalseProperty that allows the use of nullish values in context

values

PropertyDescription
${params.name}ContextContext component from createContext from solid-js
${params.name}ProviderContext.Provider component. Alias for ${params.name}Context.Provider
use${params.name}Hook to work with data from ${params.name}Context

Usage

Create context with defined defaultValue

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

const { DataContext, DataProvider, 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-solid';

const { DataContext, DataProvider, 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-solid';

const { NullishContext, NullishProvider, 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`)
*/