fodau / conuse

Context + Use

conuse

Share Hook with Context

English | 简体中文

Get Started

import React, { useState } from 'react';
import createConuse from 'conuse';

// 1️⃣ Create a custom hook
const useCounter = () => {
  const [count, setCount] = useState(0);
  const increment = () => setCount(prevCount => prevCount + 1);
  return { count, increment };
};

// 2️⃣ Wrap your hook with the createConuse factory
const { ConuseProvider, useConuseContext } = createConuse({ counter: useCounter });

function Button() {
  // 3️⃣ Use context instead of custom hook
  const { increment } = useConuseContext('counter');
  return <button onClick={increment}>+</button>;
}

function Count() {
  // 4️⃣ Use context in other components
  const { count } = useConuseContext('counter');
  return <span>{count}</span>;
}

function App() {
  // 5️⃣ Wrap your components with Provider
  return (
    <ConuseProvider>
      <Count />
      <Button />
    </ConuseProvider>
  );
}

Installation

npm:

npm i conuse

Yarn:

yarn add conuse

API

const { ConuseProvider, useConuseContext, getContext } = createConuse(useMap[, conuse])

Conuse library exports a single factory method called createConuse which return conuse type, as follow:

Conuse {
  ConuseProvider: React.FC<any>;
  useConuseContext: (name?: string) => any;
  getContext: (name?: string) => any;
}

useMap

Type: { [name: string]: hook }

It receives custom hook map, using it to compose multiple hook. You can get one hook by passing name to useConuseContext parameter.

const { useConuseContext } = createConuse({ counter: useCounter });
const Component = () => {
  const { count } = useConuseContext('counter');
  return count;
};

conuse

Type: Conuse

Using it to compose multiple conuse.

const toggleConuse = createConuse({ toggle: useToggle });
const { useConuseContext } = createConuse({ counter: useCounter }, { toggle: toggleConuse });
const Component = () => {
  const { count } = useConuseContext('counter');
  const { toggle } = useConuseContext('toggle');
  return `${count}${toggle}`;
};

ConuseProvider

Type: React.FC<any>

Just like Context.Provider, to put the ConuseProvider at the top of your App.

<ConuseProvider>
  <App />
</ConuseProvider>

useConuseContext

Type: (name?: string) => any

The children of ConuseProvider can get certain hook by useConuseContext.

const [value, setValue] = useConuseContext(<name>)

The name parameter must be one of the keys of useMap, and you can get the returned of relevant hook which will be executed.

If you want to get all hooks, not passing name to useConuseContext. But the return of useConuseContext() is all hooks, not the returned of all hooks, you need to execute hook function to get state and setState.

getContext

Type: (name?: string) => any

The difference between getContext and useConuseContext is getContext can be used everywhere, not only in Function Component.

Inpiration

Thanks to constate and unstated-next incredible work, and learned a lot from @kentcdodds' Application State Management with React.

conuse's Issues

createConuse with single hook

Before

const { useConuseContext } = createConuse({ counter: useCounter });

const Component = () => {
  const value = useConuseContext('counter')
  return null;
}

After

const conuse = createConuse(useCounter);
const Component = () => {
  const value = useConuseContext()
  return null;
}

ConuseProvider value props

const Button = () => {
  const { locale } = useConuseContext();
}

const Component = () => {
  return (
    <ConuseProvider value={{ locale }}>
       <Button />
    </ConuseProvider>
  )
}

middleware?

doSomething().then(() => {
  setState();
}).then(() => {
  doOtherThing()
})

build script

Change react in dependencies field to peerDependencies

If we use [email protected] in conuse, and the react version in one project that using it is 16.9.0, which can occur two React version in a project and React will throw error about it.