@fluentui/react-context-selector
Advanced tools
Comparing version 0.53.2 to 0.53.3
@@ -5,6 +5,51 @@ { | ||
{ | ||
"date": "Mon, 22 Feb 2021 12:21:30 GMT", | ||
"date": "Fri, 26 Feb 2021 01:10:33 GMT", | ||
"tag": "@fluentui/react-context-selector_v0.53.3", | ||
"version": "0.53.3", | ||
"comments": { | ||
"patch": [ | ||
{ | ||
"comment": "update references to major-bumped packages", | ||
"author": "elcraig@microsoft.com", | ||
"commit": "71f0a43b375b4a932ecbcf6778288422db2dc267", | ||
"package": "@fluentui/react-context-selector" | ||
} | ||
] | ||
} | ||
}, | ||
{ | ||
"date": "Thu, 25 Feb 2021 01:15:27 GMT", | ||
"tag": "@fluentui/react-context-selector_v0.53.2", | ||
"version": "0.53.2", | ||
"comments": { | ||
"none": [ | ||
{ | ||
"comment": "Add usage documentation to react-context-selector", | ||
"author": "lingfan.gao@microsoft.com", | ||
"commit": "c971bff0edf1b5c6b2f7fe5ed13bd5b5a50751c4", | ||
"package": "@fluentui/react-context-selector" | ||
} | ||
] | ||
} | ||
}, | ||
{ | ||
"date": "Wed, 24 Feb 2021 00:05:29 GMT", | ||
"tag": "@fluentui/react-context-selector_v0.53.2", | ||
"version": "0.53.2", | ||
"comments": { | ||
"none": [ | ||
{ | ||
"comment": "fix react-context-selector eslint-plugin version", | ||
"author": "elcraig@microsoft.com", | ||
"commit": "bcdd26f36386f379aff6a896f2b2bb7178fadf35", | ||
"package": "@fluentui/react-context-selector" | ||
} | ||
] | ||
} | ||
}, | ||
{ | ||
"date": "Mon, 22 Feb 2021 12:26:22 GMT", | ||
"tag": "@fluentui/react-context-selector_v0.53.2", | ||
"version": "0.53.2", | ||
"comments": { | ||
"patch": [ | ||
@@ -11,0 +56,0 @@ { |
# Change Log - @fluentui/react-context-selector | ||
This log was last generated on Mon, 22 Feb 2021 12:21:30 GMT and should not be manually modified. | ||
This log was last generated on Fri, 26 Feb 2021 01:10:33 GMT and should not be manually modified. | ||
<!-- Start content --> | ||
## [0.53.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-context-selector_v0.53.3) | ||
Fri, 26 Feb 2021 01:10:33 GMT | ||
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-context-selector_v0.53.2..@fluentui/react-context-selector_v0.53.3) | ||
### Patches | ||
- update references to major-bumped packages ([PR #17169](https://github.com/microsoft/fluentui/pull/17169) by elcraig@microsoft.com) | ||
## [0.53.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-context-selector_v0.53.2) | ||
Mon, 22 Feb 2021 12:21:30 GMT | ||
Mon, 22 Feb 2021 12:26:22 GMT | ||
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-context-selector_v0.53.0..@fluentui/react-context-selector_v0.53.2) | ||
@@ -11,0 +20,0 @@ |
define(["require", "exports", "@fluentui/set-version"], function (require, exports, set_version_1) { | ||
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
set_version_1.setVersion('@fluentui/react-context-selector', '0.53.2'); | ||
set_version_1.setVersion('@fluentui/react-context-selector', '0.53.3'); | ||
}); | ||
//# sourceMappingURL=version.js.map |
@@ -6,3 +6,3 @@ "use strict"; | ||
var set_version_1 = require("@fluentui/set-version"); | ||
set_version_1.setVersion('@fluentui/react-context-selector', '0.53.2'); | ||
set_version_1.setVersion('@fluentui/react-context-selector', '0.53.3'); | ||
//# sourceMappingURL=version.js.map |
// Do not modify this file; it is generated as part of publish. | ||
// The checked in version is a placeholder only and will not be updated. | ||
import { setVersion } from '@fluentui/set-version'; | ||
setVersion('@fluentui/react-context-selector', '0.53.2'); | ||
setVersion('@fluentui/react-context-selector', '0.53.3'); | ||
//# sourceMappingURL=version.js.map |
{ | ||
"name": "@fluentui/react-context-selector", | ||
"version": "0.53.2", | ||
"version": "0.53.3", | ||
"description": "React useContextSelector hook in userland", | ||
@@ -29,3 +29,3 @@ "main": "lib-commonjs/index.js", | ||
"devDependencies": { | ||
"@fluentui/eslint-plugin": "^1.0.0-beta", | ||
"@fluentui/eslint-plugin": "^1.0.1", | ||
"@fluentui/scripts": "^1.0.0", | ||
@@ -42,3 +42,3 @@ "@types/react": "16.9.42", | ||
"dependencies": { | ||
"@fluentui/set-version": "^8.0.0-beta.2", | ||
"@fluentui/set-version": "^8.0.1", | ||
"@types/scheduler": "^0.16.1", | ||
@@ -53,10 +53,3 @@ "scheduler": "^0.20.1", | ||
"react-dom": ">=16.8.0 <17.0.0" | ||
}, | ||
"beachball": { | ||
"tag": "latest", | ||
"disallowedChangeTypes": [ | ||
"major", | ||
"prerelease" | ||
] | ||
} | ||
} |
@@ -26,2 +26,65 @@ # `@fluentui/react-context-selector` | ||
## Usage | ||
```tsx | ||
import * as React from 'react'; | ||
import { createContext, useContextSelector, ContextSelector } from '@fluentui/react-context-selector'; | ||
interface CounterContextValue { | ||
count1: number; | ||
count2: number; | ||
incrementCount1: () => void; | ||
incrementCount2: () => void; | ||
} | ||
// 💡 The same syntax as native React context API | ||
// https://reactjs.org/docs/context.html#reactcreatecontext | ||
const CounterContext = createContext<CounterContextValue>({}); | ||
const CounterProvider = CounterContext.Provider; | ||
// not necessary but can be a good layer to mock for unit testing | ||
const useCounterContext = <T>(selector: ContextSelector<CounterCountext, T>) => | ||
useContextSelector(CounterContext, selector); | ||
const Counter1 = () => { | ||
// 💡 Context updates will be propagated only when result of a selector function will change | ||
// "Object.is()" is used for internal comparisons | ||
const count1 = useCounterContext(context => context.count1); | ||
const increment = useCounterContext(context => context.incrementCount1); | ||
return <button onClick={increment}>Counter 1: {count1}</button>; | ||
}; | ||
const Counter2 = () => { | ||
const count1 = useCounterContext(context => context.count2); | ||
const increment = useCounterContext(context => context.incrementCount2); | ||
return <button onClick={increment}>Counter 1: {count1}</button>; | ||
}; | ||
export default function App() { | ||
const [state, setState] = React.useState({ count1: 0, count2: 0 }); | ||
const incrementCount1 = React.useCallback(() => setState(s => ({ ...s, count1: s.count1 + 1 })), [setState]); | ||
const incrementCount2 = React.useCallback(() => setState(s => ({ ...s, count2: s.count2 + 1 })), [setState]); | ||
return ( | ||
<div className="App"> | ||
<CounterProvider | ||
value={{ | ||
count1: state.count1, | ||
count2: state.count2, | ||
incrementCount1, | ||
incrementCount2, | ||
}} | ||
> | ||
<Counter1 /> | ||
<Counter2 /> | ||
</CounterProvider> | ||
</div> | ||
); | ||
} | ||
``` | ||
## Technical memo | ||
@@ -28,0 +91,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
70442
637
105
Updated@fluentui/set-version@^8.0.1