Permalink
Browse files

chore: Rename parameters

  • Loading branch information...
diegohaz committed Jan 2, 2019
1 parent 46457dd commit 376224d341e65804e369d6af1607bbdadbf8c273
Showing with 15 additions and 15 deletions.
  1. +5 −5 README.md
  2. +7 −7 src/index.tsx
  3. +3 −3 test/index.test.tsx
@@ -93,9 +93,9 @@ yarn add constate@next
## API

### `createContainer(useValue[, createInputs])`
### `createContainer(useValue[, createMemoInputs])`

Constate exports a single method called `createContainer`. It receives two arguments: [`useValue`](#usevalue) and [`createInputs`](#createinputs) (optional). And returns `{ Context, Provider }`.
Constate exports a single method called `createContainer`. It receives two arguments: [`useValue`](#usevalue) and [`createMemoInputs`](#creatememoinputs) (optional). And returns `{ Context, Provider }`.

#### `useValue`

@@ -141,11 +141,11 @@ function Counter() {
}
```

#### `createInputs`
#### `createMemoInputs`

Optionally, you can pass in a function that receives the `value` returned by `useValue` and returns an array of inputs. When any input changes, `value` gets re-evaluated, triggering a re-render on all consumers (components calling `useContext()`).

If `createInputs` is undefined, it'll be re-evaluated everytime `Provider` renders:
If `createMemoInputs` is undefined, it'll be re-evaluated everytime `Provider` renders:

```js
// re-render consumers only when value.count changes
@@ -168,7 +168,7 @@ import { useMemo } from "react";
const CounterContainer = createContainer(() => {
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);
// same as passing `value => [value.count]` to `createInputs` parameter
// same as passing `value => [value.count]` to `createMemoInputs` parameter
return useMemo(() => ({ count, increment }), [count]);
});
```
@@ -6,19 +6,19 @@ function warnNoProvider() {
console.warn("[constate] Missing Provider");
}

function createContainer<P, S>(
useValue: (props: P) => S,
createInputs?: (state: S) => any[]
function createContainer<P, V>(
useValue: (props: P) => V,
createMemoInputs?: (value: V) => any[]
) {
const proxy = new Proxy({}, { get: warnNoProvider, apply: warnNoProvider });

const Context = React.createContext<S>(proxy as S);
const Context = React.createContext<V>(proxy as V);

const Provider = (props: { children?: React.ReactNode } & P) => {
const state = useValue(props);
// createInputs won't change between renders
const value = createInputs
? React.useMemo(() => state, createInputs(state))
// createMemoInputs won't change between renders
const value = createMemoInputs
? React.useMemo(() => state, createMemoInputs(state))
: state;
return <Context.Provider value={value}>{props.children}</Context.Provider>;
};
@@ -30,8 +30,8 @@ test("default", () => {
expect(getByText("1")).toBeDefined();
});

test("createInputs", () => {
const Container = createContainer(useCounter, state => [state.count]);
test("createMemoInputs", () => {
const Container = createContainer(useCounter, value => [value.count]);
const Increment = () => {
const { increment } = React.useContext(Container.Context);
return <button onClick={increment}>Increment</button>;
@@ -52,7 +52,7 @@ test("createInputs", () => {
expect(getByText("1")).toBeDefined();
});

test("empty createInputs", () => {
test("empty createMemoInputs", () => {
const Container = createContainer(useCounter, () => []);
const Increment = () => {
const { increment } = React.useContext(Container.Context);

0 comments on commit 376224d

Please sign in to comment.