@solid-primitives/context/dist/index.d.ts

Primitives simplifying or extending the SolidJS Context API

import { JSX, Context, FlowComponent } from "solid-js";
import type { ContextProviderComponent } from "../node_modules/solid-js/types/reactive/signal.js";
export type ContextProviderProps = {
    children?: JSX.Element;
} & Record<string, unknown>;
export type ContextProvider<T extends ContextProviderProps> = (props: {
    children: JSX.Element;
} & T) => JSX.Element;
/**
 * Create the Context Provider component and useContext function with types inferred from the factory function.
 * @param factoryFn Factory function will run when the provider component in executed. It takes the provider component `props` as it's argument, and what it returns will be available in the contexts for all the underlying components.
 * @param defaults fallback returned from useContext function if the context wasn't provided
 * @returns tuple of `[provider component, useContext function]`
 * @example
 * ```tsx
 * const [CounterProvider, useCounter] = createContextProvider((props: { initial: number }) => {
 *    const [count, setCount] = createSignal(props.initial);
 *    const increment = () => setCount(count() + 1)
 *    return { count, increment };
 * });
 * // Provide the context
 * <CounterProvider initial={1}>
 *    <App/>
 * </CounterProvider>
 * // get the context
 * const ctx = useCounter()
 * ctx?.count() // => 1
 * ```
 */
export declare function createContextProvider<T, P extends ContextProviderProps>(factoryFn: (props: P) => T, defaults: T): [provider: ContextProvider<P>, useContext: () => T];
export declare function createContextProvider<T, P extends ContextProviderProps>(factoryFn: (props: P) => T): [provider: ContextProvider<P>, useContext: () => T | undefined];
/**
 * A component that allows you to provide multiple contexts at once. It will work exactly like nesting multiple providers as separate components, but it will save you from the nesting.
 *
 * @param values Array of tuples of `[ContextProviderComponent, value]` or `[Context, value]` or bound `ContextProviderComponent` (that doesn't take a `value` property).
 *
 * @example
 * ```tsx
 * // before
 * <CounterCtx.Provider value={1}>
 *   <NameCtx.Provider value="John">
 *     <App/>
 *   </NameCtx.Provider>
 * </CounterCtx.Provider>
 *
 * // after
 * <MultiProvider values={[
 *  [CounterCtx.Provider, 1],
 *  [NameCtx.Provider, "John"]
 * ]}>
 *  <App/>
 * </MultiProvider>
 * ```
 */
export declare function MultiProvider<T extends readonly [unknown?, ...unknown[]]>(props: {
    values: {
        [K in keyof T]: readonly [
            Context<T[K]> | ContextProviderComponent<T[K]>,
            [
                T[K]
            ][T extends unknown ? 0 : never]
        ] | FlowComponent;
    };
    children: JSX.Element;
}): JSX.Element;