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