Merge branch 'master' into patch-3

streamich · Mar 10, 2021 · e3adac0 · e3adac0
2 parents c7e13bd + fa9d123
commit e3adac0
Show file tree

Hide file tree

Showing 196 changed files with 5,221 additions and 5,838 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -3,7 +3,7 @@ version: 2
 refs:
   container: &container
     docker:
-      - image: node:12.20.1
+      - image: node:12.21.0
     working_directory: ~/repo
   steps:
     - &Versions

diff --git a/.editorconfig b/.editorconfig
@@ -8,7 +8,7 @@ indent_size = 2
 indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
-max_line_length = 120
+max_line_length = 100
 
 [*.{ts, tsx}]
 ij_typescript_enforce_trailing_comma = keep
@@ -24,8 +24,8 @@ ij_typescript_catch_on_new_line = false
 ij_typescript_spaces_within_interpolation_expressions = false
 
 [*.md]
-max_line_length = 0
+max_line_length = 100
 trim_trailing_whitespace = false
 
 [COMMIT_EDITMSG]
-max_line_length = 0
+max_line_length = 80
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,22 @@
+module.exports = {
+  extends: ['prettier/@typescript-eslint', 'react-app', 'plugin:prettier/recommended'],
+  plugins: ['prettier'],
+  rules: {
+    'prettier/prettier': [
+      'error',
+      {
+        singleQuote: true,
+        trailingComma: 'es5',
+        tabWidth: 2,
+        printWidth: 100,
+        semicolons: true,
+        quoteProps: 'as-needed',
+        jsxSingleQuote: false,
+        bracketSpacing: true,
+        jsxBracketSameLine: true,
+        arrowParens: 'always',
+        endOfLine: 'lf',
+      },
+    ],
+  },
+};
diff --git a/.eslintrc.json b/.eslintrc.json
diff --git a/.prettierrc b/.prettierrc
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,79 @@
+# [17.2.0](https://github.com/streamich/react-use/compare/v17.1.1...v17.2.0) (2021-03-10)
+
+
+### Bug Fixes
+
+* delete isClient ([72f4cb9](https://github.com/streamich/react-use/commit/72f4cb9b405b3729975bca3acb06658ca467d15b))
+* lint issues. ([dc5bbe0](https://github.com/streamich/react-use/commit/dc5bbe0e94d131dda90942ba90c14b200df3f34e))
+* **useOrientation:** handle orientation being 0 ([793b053](https://github.com/streamich/react-use/commit/793b0539f0305e2512e7022c45a5c33b842d24d5))
+* **useOrientation:** update tests to increase coverage ([f9c743f](https://github.com/streamich/react-use/commit/f9c743fa8375ef726d33f85285d4a5af608f9a42))
+* use window inside useEffect ([2f33aa8](https://github.com/streamich/react-use/commit/2f33aa8182c92bf56d49ec3184e6b20f0c0c1e1e))
+
+
+### Features
+
+* **useOrientation:** add tests ([f45cb70](https://github.com/streamich/react-use/commit/f45cb707b52363f1cb1b32a0ebf2fdbdae79b322))
+
+## [17.1.1](https://github.com/streamich/react-use/compare/v17.1.0...v17.1.1) (2021-02-10)
+
+
+### Bug Fixes
+
+* useMountedState should not change state on componentDidUpdate lifecycle ([701b306](https://github.com/streamich/react-use/commit/701b306ed97382cbec73c834f6d3dd7baa58e339))
+
+# [17.1.0](https://github.com/streamich/react-use/compare/v17.0.2...v17.1.0) (2021-02-01)
+
+
+### Features
+
+* **prettier:** make prettier a part of eslint. ([b6993a6](https://github.com/streamich/react-use/commit/b6993a6f95a1b493945c03aecc44dafd10870816))
+
+## [17.0.2](https://github.com/streamich/react-use/compare/v17.0.1...v17.0.2) (2021-02-01)
+
+
+### Bug Fixes
+
+* proper definition for `useMeasure` ([1461527](https://github.com/streamich/react-use/commit/1461527ffc55b2a1e3c9dc6a0efc2572b66e5381))
+
+## [17.0.1](https://github.com/streamich/react-use/compare/v17.0.0...v17.0.1) (2021-01-31)
+
+
+### Bug Fixes
+
+* proper definition for isBrowser and isNavigator states. ([a087deb](https://github.com/streamich/react-use/commit/a087deb48e57b1f0a23a2d0a28d0c2d10a640cd6)), closes [#1777](https://github.com/streamich/react-use/issues/1777)
+
+# [17.0.0](https://github.com/streamich/react-use/compare/v16.1.0...v17.0.0) (2021-01-31)
+
+
+### Features
+
+* refactor the useNetwork hook. ([23037f2](https://github.com/streamich/react-use/commit/23037f207d07604dd2cd7e2cc4ba9475221be780))
+
+
+### BREAKING CHANGES
+
+* `useNetwork` hook renamed to `useNetworkState`.
+
+# [16.1.0](https://github.com/streamich/react-use/compare/v16.0.0...v16.1.0) (2021-01-31)
+
+
+### Features
+
+* improve `on` and `off` util functions typing. ([723c588](https://github.com/streamich/react-use/commit/723c588fef6aba9f10ea9f5ea7bc444532519f9a))
+
+# [16.0.0](https://github.com/streamich/react-use/compare/v15.3.8...v16.0.0) (2021-01-30)
+
+
+### chore
+
+* refactoring and rearrangement. ([a27f09f](https://github.com/streamich/react-use/commit/a27f09fd367f8b172866b5fcbaf66f9a5a3481bb))
+
+
+### BREAKING CHANGES
+
+* all `create*` factories been moved to `factory` subdirectory and in case direct import should be imported like `react-use/esm/factory/createBreakpoint`
+* `comps` directory renamed to `component`
+
 ## [15.3.8](https://github.com/streamich/react-use/compare/v15.3.7...v15.3.8) (2021-01-08)
 
 

diff --git a/README.md b/README.md
@@ -1,3 +1,10 @@
+<div align="center">
+    <a href="https://www.kickstarter.com/projects/aleks-p/multiplayer-collaborative-editing-database">
+       Collaborative editing for your app. <strong>Support on Kickstarter!</strong>
+    </a>
+</div>
+
+
 <div align="center">
   <h1>
     <br/>
@@ -58,7 +65,7 @@
   - [`useMotion`](./docs/useMotion.md) &mdash; tracks state of device's motion sensor.
   - [`useMouse` and `useMouseHovered`](./docs/useMouse.md) &mdash; tracks state of mouse position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemouse--docs)
   - [`useMouseWheel`](./docs/useMouseWheel.md) &mdash; tracks deltaY of scrolled mouse wheel. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemousewheel--docs)
-  - [`useNetwork`](./docs/useNetwork.md) &mdash; tracks state of user's internet connection.
+  - [`useNetworkState`](./docs/useNetworkState.md) &mdash; tracks the state of browser's network connection. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usenetworkstate--demo)
   - [`useOrientation`](./docs/useOrientation.md) &mdash; tracks state of device's screen orientation.
   - [`usePageLeave`](./docs/usePageLeave.md) &mdash; triggers when mouse leaves page boundaries.
   - [`useScratch`](./docs/useScratch.md) &mdash; tracks mouse click-and-scrub state.

diff --git a/docs/createGlobalState.md b/docs/createGlobalState.md
@@ -1,6 +1,6 @@
 # `useGlobalState`
 
-A React hook which creates a globally shared state.
+A React hook that creates a globally shared state.
 
 ## Usage
 
@@ -30,3 +30,32 @@ const Demo: FC = () => {
   );
 };
 ```
+
+It also allows initializing the state with a function and using a function in the setState:
+
+```tsx
+const useGlobalValue = createGlobalState<number>(() => 0);
+
+const CompA: FC = () => {
+  const [value, setValue] = useGlobalValue();
+
+  return <button onClick={() => setValue(value => value + 1)}>+</button>;
+};
+
+const CompB: FC = () => {
+  const [value, setValue] = useGlobalValue();
+
+  return <button onClick={() => setValue(value => value - 1)}>-</button>;
+};
+
+const Demo: FC = () => {
+  const [value] = useGlobalValue();
+  return (
+    <div>
+      <p>{value}</p>
+      <CompA />
+      <CompB />
+    </div>
+  );
+};
+```
diff --git a/docs/useKey.md b/docs/useKey.md
@@ -23,7 +23,7 @@ const Demo = () => {
 Or as render-prop:
 
 ```jsx
-import UseKey from 'react-use/lib/comps/UseKey';
+import UseKey from 'react-use/lib/component/UseKey';
 
 <UseKey filter='a' fn={() => alert('"a" key pressed!')} />
 ```

diff --git a/docs/useMountedState.md b/docs/useMountedState.md
@@ -1,7 +1,10 @@
 # `useMountedState`
 
+> **NOTE!:** despite having `State` in its name **_this hook does not cause component re-render_**.  
+> This component designed to be used to avoid state updates on unmounted components.
+
 Lifecycle hook providing ability to check component's mount state.  
-Gives a function that will return `true` if component mounted and `false` otherwise.
+Returns a function that will return `true` if component mounted and `false` otherwise.
 
 ## Usage
 

diff --git a/docs/useNetwork.md b/docs/useNetwork.md
diff --git a/docs/useNetworkState.md b/docs/useNetworkState.md
@@ -0,0 +1,77 @@
+# `useNetworkState`
+
+Tracks the state of browser's network connection.
+
+As of the standard it is not guaranteed that browser connected to the _Internet_, it only guarantees the network
+connection.
+
+## Usage
+
+```jsx
+import {useNetworkState} from 'react-use';
+
+const Demo = () => {
+  const state = useNetworkState();
+
+  return (
+    <pre>
+      {JSON.stringify(state, null, 2)}
+    </pre>
+  );
+};
+```
+
+#### State interface:
+
+```typescript
+interface IUseNetworkState {
+  /**
+   * @desc Whether browser connected to the network or not.
+   */
+  online: boolean | undefined;
+  /**
+   * @desc Previous value of `online` property. Helps to identify if browser
+   * just connected or lost connection.
+   */
+  previous: boolean | undefined;
+  /**
+   * @desc The {Date} object pointing to the moment when state change occurred.
+   */
+  since: Date | undefined;
+  /**
+   * @desc Effective bandwidth estimate in megabits per second, rounded to the
+   * nearest multiple of 25 kilobits per seconds.
+   */
+  downlink: number | undefined;
+  /**
+   * @desc Maximum downlink speed, in megabits per second (Mbps), for the
+   * underlying connection technology
+   */
+  downlinkMax: number | undefined;
+  /**
+   * @desc Effective type of the connection meaning one of 'slow-2g', '2g', '3g', or '4g'.
+   * This value is determined using a combination of recently observed round-trip time
+   * and downlink values.
+   */
+  effectiveType: 'slow-2g' | '2g' | '3g' | '4g' | undefined;
+  /**
+   * @desc Estimated effective round-trip time of the current connection, rounded
+   * to the nearest multiple of 25 milliseconds
+   */
+  rtt: number | undefined;
+  /**
+   * @desc Wheter user has set a reduced data usage option on the user agent.
+   */
+  saveData: boolen | undefined;
+  /**
+   * @desc The type of connection a device is using to communicate with the network.
+   */
+  type: 'bluetooth' | 'cellular' | 'ethernet' | 'none' | 'wifi' | 'wimax' | 'other' | 'unknown' | undefined;
+}
+```
+
+#### Call signature
+
+```typescript
+function useNetworkState(initialState?: IUseNetworkState | (() => IUseNetworkState)): IUseNetworkState;
+```
diff --git a/jest.config.base.ts b/jest.config.base.ts
@@ -0,0 +1,13 @@
+import type { Config } from '@jest/types';
+
+export const baseJestConfig: Config.InitialOptions = {
+  'preset': 'ts-jest',
+  'clearMocks': true,
+  'coverageDirectory': 'coverage',
+  'testMatch': [
+    '<rootDir>/tests/**/*.test.(ts|tsx)'
+  ],
+  'setupFiles': [
+    '<rootDir>/tests/setupTests.ts'
+  ]
+}
diff --git a/jest.config.node.ts b/jest.config.node.ts
@@ -0,0 +1,9 @@
+import type { Config } from '@jest/types';
+import { baseJestConfig } from './jest.config.base';
+
+const config: Config.InitialOptions = {
+  ...baseJestConfig,
+  testEnvironment: 'node', // browser-like
+}
+
+export default config;
diff --git a/jest.config.ts b/jest.config.ts
@@ -0,0 +1,9 @@
+import type { Config } from '@jest/types';
+import { baseJestConfig } from './jest.config.base';
+
+const config: Config.InitialOptions = {
+  ...baseJestConfig,
+  testEnvironment: 'jsdom', // browser-like
+}
+
+export default config;