diff --git a/.circleci/config.yml b/.circleci/config.yml
index f5ce2a20..9177888b 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -1,17 +1,39 @@
version: 2.1
orbs:
- node: circleci/node@1.1.6
+ node: circleci/node@3.0.1
jobs:
- build-and-test:
- executor:
- name: node/default
+ test:
+ executor: node/default
+ parameters:
+ node-version:
+ type: string
steps:
- checkout
- - node/with-cache:
- steps:
- - run: npm install
- - run: npm test
+ - node/install:
+ node-version: << parameters.node-version >>
+ - node/install-packages
+ - run:
+ name: Node version
+ command: node -v
+ - run:
+ name: Npm version
+ command: npm -v
+ - run:
+ name: Validate TS types
+ command: npm run typecheck
+ - run:
+ name: Run eslint
+ command: npm run lint
+ - run:
+ name: Unit tests and coverage
+ command: npm run test:coverage:summary
workflows:
- build-and-test:
+ all-tests:
jobs:
- - build-and-test
+ - test:
+ matrix:
+ parameters:
+ node-version:
+ - 12.18.0
+ - 13.14.0
+ - 14.5.0
diff --git a/CHANGELOG.md b/CHANGELOG.md
index d860814c..c155066c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,21 +1,27 @@
## HEAD
+## 3.0.0-rc
+###### _2020-07-18_
+**BREAKING CHANGE**
+- Library has been completely rewritten in TypeScript, complies with React >=16.8, and all tooling has been updated (#11) @shawnmcknight
+ - The API has been changed significantly; there are no longer separate `onLoad` and `onChange` props in favor of a single `onChange` prop. The callback for `onChange` returns `height` and `width` instead of `scrollbarHeight` and `scrollbarWidth`.
+
## 2.1.0
-###### _Jan 31, 2018_
+###### _2020-01-31_
- Lodash as a peerDependency was causing missing peerDependency errors. Lodash peerDep replaced with stifle dep (#7) @shawnmcknight
- Bump several dependency versions @shawnmcknight
- Configure npm to not generate package-lock file @shawnmcknight
## 2.0.0
-###### _May 30, 2017_
+###### _2017-05-30_
Major version bump to facilitate new dependency requirements:
- Make react a peerDependency to avoid running module duplication (#3) @shawnmcknight
- Make lodash a peerDependency due to its common use and avoid inflating build size unnecessarily @shawnmcknight
## 1.0.2
-###### _May 28, 2017_
+###### _2017-05-28_
- Remove separate lodash modules in favor of direct import of functions @shawnmcknight
- Add support for prettier and update libraries to conform to rules @shawnmcknight
- Update all dependencies to latest version and make updates to conform to API changes @shawnmcknight
@@ -25,13 +31,12 @@ Major version bump to facilitate new dependency requirements:
## 1.0.1
-###### _Apr 26, 2017_
+###### _2017-04-26_
- Cancel throttled events when unmounting component @shawnmcknight
## 1.0.0
-###### _Apr 17, 2017_
-
+###### _2017-04-17_
- Add unit tests through mocha/chai/enzyme to reach 100% code coverage @shawnmcknight
- Add code coverage tooling through istanbul/nyc @shawnmcknight
- Update to React separate prop-types package @shawnmcknight
@@ -40,6 +45,5 @@ Major version bump to facilitate new dependency requirements:
## 0.1.0
-###### _Mar 25, 2017_
-
+###### _2017-03-25_
- Initial creation of this repository! Thanks for using it!
diff --git a/README.md b/README.md
index 73392a90..47ed011b 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,6 @@
# React-Scrollbar-Size
+[](https://app.circleci.com/pipelines/github/STORIS/react-scrollbar-size?branch=master)
+[](https://www.npmjs.com/package/react-scrollbar-size)
React-Scrollbar-Size is a React component designed to calculate the size of the user agent's horizontal and vertical scrollbars.
It will also detect when the size of the scrollbars changes, such as when the user agent's zoom factor changes.
@@ -25,7 +27,7 @@ The callback accepts an object which will be updated with the following properti
| `height` | The current height of the horizontal scrollbar. |
## Examples
-To see a live example, follow these [instructions](https://github.com/STORIS/react-scrollbar-size/blob/master/examples/README.md).
+To see a live example, follow these [instructions](https://github.com/STORIS/react-scrollbar-size/blob/master/example/README.md).
### TypeScript
```tsx
@@ -33,36 +35,36 @@ import React, { CSSProperties, FunctionComponent, useState } from 'react';
import ScrollbarSize from 'react-scrollbar-size';
const styles: CSSProperties = {
- margin: '1rem',
- textAlign: 'center',
+ margin: '1rem',
+ textAlign: 'center',
};
const ScrollbarSizeDemo: FunctionComponent = () => {
- const [currentHeight, setHeight] = useState(0);
- const [currentWidth, setWidth] = useState(0);
-
- const scrollbarSizeChange = ({ height, width }: ScrollbarSizeChangeHandlerParams) => {
- if (height !== currentHeight) {
- setHeight(height);
- }
-
- if (width !== currentWidth) {
- setWidth(width);
- }
- };
-
- return (
-
-
React Scrollbar Size Demo
-
Tip: Change browser zoom level to see scrollbar sizes change.
-
-
- {`The current height of the scrollbar is ${currentHeight}px.`}
-
- {`The current width of the scrollbar is ${currentWidth}px.`}
-
-
+
React Scrollbar Size Demo
+
Tip: Change browser zoom level to see scrollbar sizes change.
+
+
+ {`The current height of the scrollbar is ${currentHeight}px.`}
+
+ {`The current width of the scrollbar is ${currentWidth}px.`}
+
+
-
React Scrollbar Size Demo
-
Tip: Change browser zoom level to see scrollbar sizes change.
-
-
- {`The current height of the scrollbar is ${currentHeight}px.`}
-
- {`The current width of the scrollbar is ${currentWidth}px.`}
-
-
+
React Scrollbar Size Demo
+
Tip: Change browser zoom level to see scrollbar sizes change.
+
+
+ {`The current height of the scrollbar is ${currentHeight}px.`}
+
+ {`The current width of the scrollbar is ${currentWidth}px.`}
+
+