Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

create-context-state

Package Overview
Dependencies
Maintainers
1
Versions
186
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

create-context-state - npm Package Compare versions

Comparing version 0.0.0-pr2166.1 to 0.0.0-pr2166.2

dist/_tsup-dts-rollup.d.cts

227

dist/_tsup-dts-rollup.d.ts

@@ -0,1 +1,228 @@

import { ComponentType } from 'react';
import { Context } from 'react';
import { PropsWithChildren } from 'react';
import { default as React_2 } from 'react';
declare type ContextCreator<Context extends object, Props extends object, State> = (helpers: ContextCreatorHelpers<Context, Props, State>) => Context;
export { ContextCreator }
export { ContextCreator as ContextCreator_alias_1 }
declare interface ContextCreatorHelpers<Context extends object, Props extends object, State = undefined> {
/**
* Get the context with a partial update.
*/
get: GetContext<Context>;
/**
* Set the context with a partial update.
*/
set: SetContext<Context>;
/**
* The latest value for the provided props.
*/
props: Props;
/**
* The previous value for the generated context. This is `undefined` when
* first rendered.
*/
previousContext: Context | undefined;
/**
* The state provided by the custom hook.
*/
state: State;
}
export { ContextCreatorHelpers }
export { ContextCreatorHelpers as ContextCreatorHelpers_alias_1 }
declare interface ContextHook<Ctx extends object> {
(): Ctx;
<SelectedValue>(selector: ContextSelector<Ctx, SelectedValue>, equalityFn?: EqualityChecker<SelectedValue>): SelectedValue;
}
export { ContextHook }
export { ContextHook as ContextHook_alias_1 }
export declare function contextHookFactory<Ctx extends object>(DefaultContext: Context<Ctx | null>): ContextHook<Ctx>;
export declare type ContextSelector<Ctx extends object, SelectedValue> = (state: Ctx) => SelectedValue;
/**
* Create a `Provider` and `useContext` retriever with a custom hook.
*
* This can be used to create
*
* ```tsx
* 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>
* )
* }
* ```
*
* @typeParam Context - The type of the context that is returned from the
* `useContext` hook.
* @typeParam Props - The optional props that are passed through to the `Provider`.
*/
declare function createContextHook<Ctx extends object, Props extends PropsWithChildren<object> = PropsWithChildren<object>>(useHook: UseHook<Ctx, Props>): CreateContextReturn<Ctx, Props>;
export { createContextHook }
export { createContextHook as createContextHook_alias_1 }
declare type CreateContextReturn<Ctx extends object, Props extends object = object> = [
Provider: ComponentType<PropsWithChildren<Props>>,
hook: ContextHook<Ctx>,
DefaultContext: Context<Ctx | null>
];
export { CreateContextReturn }
export { CreateContextReturn as CreateContextReturn_alias_1 }
/**
* Create a context and provider with built in setters and getters.
*
* ```tsx
* 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>
* </>
* );
* };
* ```
*
* @typeParam Context - The type of the context that is returned from the
* `useContext` hook.
* @typeParam Props - The optional props that are passed through to the
* `Provider`.
* @typeParam State - Additional state which can be captured via hooks.
*
* @param creator - A function used to create the desired context.
* @param hook - An optional hook which can be used to provide additional state
* to use in the creator function. Using hooks which rely on context will
* constrain the returned `Provider` function to only be used in scenarios where
* the the context is available. Make sure to memoize any exotic values (objects
* and arrays) returned from the hook or your code will infinitely render.
*/
declare function createContextState<Context extends object, Props extends object = object>(creator: ContextCreator<Context, Props, undefined>): CreateContextReturn<Context, Props>;
declare function createContextState<Context extends object, Props extends object, State>(creator: ContextCreator<Context, Props, State>, hook: NamedHook<Props, State>): CreateContextReturn<Context, Props>;
export { createContextState }
export { createContextState as createContextState_alias_1 }
export declare type EqualityChecker<SelectedValue> = (selectedValue: SelectedValue, newSelectedValue: unknown) => boolean;
declare interface GetContext<Context extends object> {
(): Context;
<SelectedValue>(selector: ContextSelector<Context, SelectedValue>): SelectedValue;
}
export { GetContext }
export { GetContext as GetContext_alias_1 }
/**
* Get the signature for the named hooks.
*/
declare type NamedHook<Props extends object, State> = (props: Props) => State;
export { NamedHook }
export { NamedHook as NamedHook_alias_1 }
declare type PartialContext<Context extends object> = Partial<Context> | ((context: Context) => Partial<Context>);
export { PartialContext }
export { PartialContext as PartialContext_alias_1 }
declare type SetContext<Context extends object> = (partial: PartialContext<Context>) => void;
export { SetContext }
export { SetContext as SetContext_alias_1 }
/**
* Split but don't allow empty string.
*/
export declare type Split<Input extends string, Splitter extends string> = Input extends `${infer T}${Splitter}${infer Rest}` ? '' extends T ? [...Split<Rest, Splitter>] : [T, ...Split<Rest, Splitter>] : [Input];
export declare type SplitEmpty<Input extends string, Splitter extends string> = Input extends `${infer T}${Splitter}${infer Rest}` ? [T, ...Split<Rest, Splitter>] : [Input];
declare type UseHook<Context extends object, Props extends object = object> = (props: Props) => Context;
export declare const useIsomorphicLayoutEffect: typeof React_2.useLayoutEffect;
export { }

17

dist/create-context-state.d.ts

@@ -1,1 +0,16 @@

export {};
export { createContextHook } from './_tsup-dts-rollup';
export { contextHookFactory } from './_tsup-dts-rollup';
export { CreateContextReturn } from './_tsup-dts-rollup';
export { ContextSelector } from './_tsup-dts-rollup';
export { EqualityChecker } from './_tsup-dts-rollup';
export { ContextHook } from './_tsup-dts-rollup';
export { Split } from './_tsup-dts-rollup';
export { SplitEmpty } from './_tsup-dts-rollup';
export { useIsomorphicLayoutEffect } from './_tsup-dts-rollup';
export { createContextState } from './_tsup-dts-rollup';
export { GetContext } from './_tsup-dts-rollup';
export { PartialContext } from './_tsup-dts-rollup';
export { SetContext } from './_tsup-dts-rollup';
export { NamedHook } from './_tsup-dts-rollup';
export { ContextCreatorHelpers } from './_tsup-dts-rollup';
export { ContextCreator } from './_tsup-dts-rollup';

4

dist/create-context-state.js

@@ -1,2 +0,2 @@

// packages/create-context-state/src/create-context-hook.tsx
// src/create-context-hook.tsx
import React, { createContext, useContext, useEffect, useLayoutEffect, useRef } from "react";

@@ -44,3 +44,3 @@ function createContextHook(useHook) {

// packages/create-context-state/src/create-context-state.tsx
// src/create-context-state.tsx
import { useEffect as useEffect2, useRef as useRef2, useState } from "react";

@@ -47,0 +47,0 @@ function createContextState(creator, hook) {

{
"name": "create-context-state",
"version": "0.0.0-pr2166.1",
"version": "0.0.0-pr2166.2",
"description": "Create a context hook and provider for managing the state of your react application",

@@ -39,2 +39,3 @@ "keywords": [

"devDependencies": {
"@remirror/cli": "0.0.0-pr2166.2",
"@testing-library/react": "^14.0.0",

@@ -58,3 +59,6 @@ "@types/react": "^18.2.0",

"sizeLimit": "1.5 KB"
},
"scripts": {
"build": "remirror-cli build"
}
}

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc