Skip to content

Commit 8907b75

Browse files
committed
pass additional props to context consumer
1 parent 2da590d commit 8907b75

File tree

3 files changed

+16
-3
lines changed

3 files changed

+16
-3
lines changed

.size-limit

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
[
22
{
33
path: "dist/index.js",
4-
limit: "5.0 KB"
4+
limit: "6.0 KB"
55
}
66
]

README.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,19 @@ import {MemoizeContext} from 'react-memoize';
3838
</MemoizeContext>
3939
</Context.Provider>
4040
```
41+
`consumer` could be any "context"-compatible Component - React.context, create-react-context or unstated.
42+
All the additional props will be passed down to consumer.
43+
44+
It is better to explain using example.
45+
```js
46+
<MemoizeContext consumer={Consumer} prop1={1} anotherProp={3} selector={select}> />
47+
48+
// will result
49+
50+
<Consumer prop1={1} anotherProp={3}>
51+
{ contextValues => <ReactMemoize {...contextValues} compute={selector}>...</ReactMemoize>}
52+
</Consumer>
53+
```
4154

4255
This is like Redux without dispatching. State in context, selector aka mapStateToProps, and magic memoization in between.
4356

src/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,8 @@ const createMemoizer = memoizationFunction => (
5252
export const MemoizeOne = createMemoizer(memoizeOne);
5353
export const MemoizeState = createMemoizer(memoizeState);
5454

55-
export const MemoizeContext = ({ consumer: Consumer, selector, pure, children }) => (
56-
<Consumer>
55+
export const MemoizeContext = ({ consumer: Consumer, selector, pure, children, ...rest }) => (
56+
<Consumer {...rest}>
5757
{values =>
5858
(<MemoizeState {...values} compute={selector} pure={pure}>
5959
{result => children(result)}

0 commit comments

Comments
 (0)