Skip to main content

create-context-state

package create-context-state

function createContextHook()

Create a Provider and useContext retriever with a custom hook.

This can be used to create

import { useState, useEffect } from 'react';
import { createContextHook } from 'create-context-state'

interface Props {
defaultCount: number;
}

interface Context {
count: number;
increment: () => void;
decrement: () => void;
reset: () => void;
}

const [CountProvider, useCountStore] = createContextHook<Context, Props>((props) => {
const { defaultCount } = props;

const [context, setContext] = useState(() => {
return {
count: defaultCount,
increment: () => setContext(value => ({...previous, count: previous.count + 1 })),
decrement: () => setContext(previous => ({...previous, count: previous.count - 1 })),
reset: () => setContext(previous => ({...previous, count: defaultCount })),
}
});

useEffect(() => {
setContext((previousContext) => ({
...previousContext,
count: defaultCount,
reset: () => setContext(previous => ({...previous, count: defaultCount })),
}));
}, [defaultCount])

return context;
})

const App = () => {
return (
<CountProvider defaultCount={100}>
<InnerApp />
</FooProvider>
)
}

const InnerApp = () => {
const { count, increment, decrement, reset } = useCountStore()

return (
<div>
<h1>{count}</h1>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
<button onClick={reset}>reset</button>
</div>
)
}

Signature:

export declare function createContextHook<Ctx extends object, Props extends PropsWithChildren<object> = PropsWithChildren<object>>(useHook: UseHook<Ctx, Props>): CreateContextReturn<Ctx, Props>;

Parameters:

ParameterTypeDescription
useHookUseHook<Ctx, Props>

Returns:

CreateContextReturn<Ctx, Props>

function createContextState()

Create a context and provider with built in setters and getters.

import { createContextState } from 'create-context-state';

interface Context {
count: number;
increment: () => void;
decrement: () => void;
reset: () => void;
}

interface Props {
defaultCount: number;
}

const [CountProvider, useCount] = createContextState<Context, Props>(({ set, props }) => ({
count: previousContext?.count ?? props.defaultCount,
increment: () => set((state) => ({ count: state.count + 1 })),
decrement: () => set((state) => ({ count: state.count - 1 })),
reset: () => set({ count: props.defaultCount }),
}));

const App = () => {
return (
<CountProvider>
<Counter />
</CountProvider>
);
};

const Counter = () => {
const { count, increment, decrement, reset } = useCount();

return (
<>
<h1>{count}</h1>
<button onClick={() => increment()}>+</button>
<button onClick={() => decrement()}>-</button>
<button onClick={() => reset()}>reset</button>
</>
);
};

Signature:

export declare function createContextState<Context extends object, Props extends object = object>(creator: ContextCreator<Context, Props, undefined>): CreateContextReturn<Context, Props>;

Parameters:

ParameterTypeDescription
creatorContextCreator<Context, Props, undefined>A function used to create the desired context.

Returns:

CreateContextReturn<Context, Props>

function createContextState()

Signature:

export declare function createContextState<Context extends object, Props extends object, State>(creator: ContextCreator<Context, Props, State>, hook: NamedHook<Props, State>): CreateContextReturn<Context, Props>;

Parameters:

ParameterTypeDescription
creatorContextCreator<Context, Props, State>
hookNamedHook<Props, State>

Returns:

CreateContextReturn<Context, Props>

interface ContextCreatorHelpers

Signature:

export interface ContextCreatorHelpers<Context extends object, Props extends object, State = undefined> 

property get

Get the context with a partial update.

Signature:

get: GetContext<Context>;

property previousContext

The previous value for the generated context. This is undefined when first rendered.

Signature:

previousContext: Context | undefined;

property props

The latest value for the provided props.

Signature:

props: Props;

property set

Set the context with a partial update.

Signature:

set: SetContext<Context>;

property state

The state provided by the custom hook.

Signature:

state: State;

interface ContextHook

Signature:

export interface ContextHook<Ctx extends object> 

Signature:

(): Ctx;

Signature:

<SelectedValue>(selector: ContextSelector<Ctx, SelectedValue>, equalityFn?: EqualityChecker<SelectedValue>): SelectedValue;

interface GetContext

Signature:

export interface GetContext<Context extends object> 

Signature:

(): Context;

Signature:

<SelectedValue>(selector: ContextSelector<Context, SelectedValue>): SelectedValue;

type ContextCreator

Signature:

export type ContextCreator<Context extends object, Props extends object, State> = (helpers: ContextCreatorHelpers<Context, Props, State>) => Context;

References: ContextCreatorHelpers

type CreateContextReturn

Signature:

export type CreateContextReturn<Ctx extends object, Props extends object = object> = [
Provider: ComponentType<PropsWithChildren<Props>>,
hook: ContextHook<Ctx>,
DefaultContext: Context<Ctx | null>
];

References: ContextHook

type NamedHook

Get the signature for the named hooks.

Signature:

export type NamedHook<Props extends object, State> = (props: Props) => State;

type PartialContext

Signature:

export type PartialContext<Context extends object> = Partial<Context> | ((context: Context) => Partial<Context>);

type SetContext

Signature:

export type SetContext<Context extends object> = (partial: PartialContext<Context>) => void;

References: PartialContext