@fluentui/react-context-selector - npm Package Compare versions

Comparing version 0.53.2 to 0.53.3

CHANGELOG.json

@@ -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": "[e-mail]",
+            "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": "[e-mail]",
+            "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": "[e-mail]",
+            "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 @@ {

CHANGELOG.md

 # 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 [e-mail])
+
 ## [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 @@

lib-amd/version.js

 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

lib-commonjs/version.js

@@ -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

lib/version.js

 // 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

package.json

 {
   "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"
-    ]
   }
 }

README.md

@@ -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 @@

No alert changes

Improved metrics

Total package byte prevSize

70442

5.5%

Lines of code

637

7.6%

Number of lines in readme file

105

150%

Dependency changes

• Updated

  @fluentui/set-version@^8.0.1