Skip to content

Instantly share code, notes, and snippets.

@lovetingyuan

lovetingyuan/simple-unstated-next.ts

Last active December 25, 2020 09:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save lovetingyuan/26e9b65ff5a6f83c8893b8d1cf154a68 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save lovetingyuan/26e9b65ff5a6f83c8893b8d1cf154a68 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. lovetingyuan revised this gist Dec 25, 2020. 1 changed file with 12 additions and 10 deletions.
    22 changes: 12 additions & 10 deletions simple-unstated-next.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -5,29 +5,31 @@ interface ContainerProviderProps<State = void> {
    children: React.ReactNode
    }

    const usecontext = React.useContext

    export default function createContainer<Value, State = void>(
    useHook: (initialState?: State) => Value,
    usehook: (initialState?: State) => Value,
    ) {
    const Context = React.createContext<Value | null>(null)

    function container(props: ContainerProviderProps<State>): JSX.Element
    function container(): Value
    function container(props?: ContainerProviderProps<State>): Value | JSX.Element {
    function Container(props: ContainerProviderProps<State>): JSX.Element
    function Container(): Value
    function Container(props?: ContainerProviderProps<State>): Value | JSX.Element {
    if (props) {
    const value = useHook(props.initialState)
    const value = usehook(props.initialState)
    return React.createElement(Context.Provider, { value }, props.children)
    }
    const value = React.useContext(Context)
    const value = usecontext(Context)
    if (value === null) {
    throw new Error('Component must be wrapped with container component returned by `createContainer`.')
    }
    return value
    }
    if (useHook.name) {
    Object.defineProperty(container, 'name', {
    value: useHook.name,
    if (usehook.name) {
    Object.defineProperty(Container, 'name', {
    value: usehook.name,
    configurable: true
    })
    }
    return container
    return Container
    }
  2. lovetingyuan revised this gist Dec 25, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion simple-unstated-next.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -19,7 +19,7 @@ export default function createContainer<Value, State = void>(
    }
    const value = React.useContext(Context)
    if (value === null) {
    throw new Error('Component must be wrapped with container component.')
    throw new Error('Component must be wrapped with container component returned by `createContainer`.')
    }
    return value
    }
  3. lovetingyuan revised this gist Dec 23, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion simple-unstated-next.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -19,7 +19,7 @@ export default function createContainer<Value, State = void>(
    }
    const value = React.useContext(Context)
    if (value === null) {
    throw new Error('Component must be wrapped with <Container.Provider>')
    throw new Error('Component must be wrapped with container component.')
    }
    return value
    }
  4. lovetingyuan renamed this gist Dec 23, 2020. 1 changed file with 7 additions and 7 deletions.
    14 changes: 7 additions & 7 deletions simple-unstated-next.js → simple-unstated-next.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -1,27 +1,27 @@
    import React from 'react'

    interface ContainerProviderProps<State = void> {
    initialState?: State
    children: React.ReactNode
    initialState?: State
    children: React.ReactNode
    }

    export default function createContainer<Value, State = void>(
    useHook: (initialState?: State) => Value,
    useHook: (initialState?: State) => Value,
    ) {
    const Context = React.createContext<Value | null>(null)
    const Context = React.createContext<Value | null>(null)

    function container(props: ContainerProviderProps<State>): JSX.Element
    function container(): Value
    function container (props?: ContainerProviderProps<State>): Value | JSX.Element {
    function container(props?: ContainerProviderProps<State>): Value | JSX.Element {
    if (props) {
    const value = useHook(props.initialState)
    return <Context.Provider value={value}>{props.children}</Context.Provider>
    return React.createElement(Context.Provider, { value }, props.children)
    }
    const value = React.useContext(Context)
    if (value === null) {
    throw new Error('Component must be wrapped with <Container.Provider>')
    }
    return value
    return value
    }
    if (useHook.name) {
    Object.defineProperty(container, 'name', {
  5. lovetingyuan created this gist Dec 23, 2020.
    33 changes: 33 additions & 0 deletions simple-unstated-next.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,33 @@
    import React from 'react'

    interface ContainerProviderProps<State = void> {
    initialState?: State
    children: React.ReactNode
    }

    export default function createContainer<Value, State = void>(
    useHook: (initialState?: State) => Value,
    ) {
    const Context = React.createContext<Value | null>(null)

    function container(props: ContainerProviderProps<State>): JSX.Element
    function container(): Value
    function container (props?: ContainerProviderProps<State>): Value | JSX.Element {
    if (props) {
    const value = useHook(props.initialState)
    return <Context.Provider value={value}>{props.children}</Context.Provider>
    }
    const value = React.useContext(Context)
    if (value === null) {
    throw new Error('Component must be wrapped with <Container.Provider>')
    }
    return value
    }
    if (useHook.name) {
    Object.defineProperty(container, 'name', {
    value: useHook.name,
    configurable: true
    })
    }
    return container
    }