Add ability to use via custom hook

.eslintrc.js

@@ -1,6 +1,7 @@
 module.exports = {
 	extends: [
 		'airbnb',
+		'plugin:react-hooks/recommended',
 		'plugin:jest/recommended',
 		'plugin:jest/style',
 		'plugin:@typescript-eslint/recommended',
@@ -9,7 +10,7 @@ module.exports = {
 	],
 	env: { browser: true, es6: true, node: true, jest: true },
 	parser: '@typescript-eslint/parser',
-	plugins: ['@typescript-eslint', 'react-hooks', 'jest'],
+	plugins: ['@typescript-eslint', 'jest'],
 	rules: {
 		// enforce curly brace usage
 		curly: ['error', 'all'],
@@ -48,7 +49,14 @@ module.exports = {
 			},
 		},
 		{
-			files: ['**/scripts/**', '**/example/**', '**/__tests__/**', '**/*.test.ts', '**/*.test.tsx'],
+			files: [
+				'**/scripts/**',
+				'**/example/**',
+				'**/example-component/**',
+				'**/__tests__/**',
+				'**/*.test.ts',
+				'**/*.test.tsx',
+			],
 			rules: {
 				// allow dev dependencies
 				'import/no-extraneous-dependencies': [

.gitignore

@@ -1,6 +1,6 @@
 ### directories
 # parcel cache folder
-.cache
+.parcel-cache
 # build folder
 build
 # test coverage

README.md

@@ -1,7 +1,7 @@
 # React-Scrollbar-Size
 <div align="center">
 
-React-Scrollbar-Size is a [React](https://reactjs.org/) component designed to calculate the size of the user agent's horizontal and vertical scrollbars.
+React-Scrollbar-Size is a [React](https://reactjs.org/) hook designed to calculate the size of the user agent's horizontal and vertical scrollbars.
 It will also detect when the size of the scrollbars change, such as when the user agent's zoom factor changes.
 
 [![npm package](https://img.shields.io/npm/v/react-scrollbar-size/latest.svg)](https://www.npmjs.com/package/react-scrollbar-size)
@@ -29,55 +29,39 @@ $ npm install react-scrollbar-size
 ```
 
 ## Usage
+The `useScrollbarSize` custom hook returns an object with two properties:
 
-### Props
-| Name | Description |
-| ---- | ---- |
-| `onChange` | Callback which will fire when the scrollbar sizes change. |
+| Name     | Description                                    |
+| -------- | ---------------------------------------------- |
+| `width`  | The current width of the vertical scrollbar    |
+| `height` | The current height of the horizontal scrollbar |
 
-The callback accepts an object which will be updated with the following properties:
-
-| Name | Description |
-| ---- | ---- |
-| `width` | The current width of the vertical scrollbar. |
-| `height` | The current height of the horizontal scrollbar. |
+:information_source: The component syntax will be deprecated in version 4. It is currently being provided for backwards compatibility.
 
 ## Examples
 To see a live example, follow these [instructions](/example/README.md).
 
 ### TypeScript
 ```tsx
-import React, { CSSProperties, FunctionComponent, useState } from 'react';
-import ScrollbarSize from 'react-scrollbar-size';
+import React, { CSSProperties, FunctionComponent } from 'react';
+import { useScrollbarSize } from 'react-scrollbar-size';
 
 const styles: CSSProperties = {
   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);
-    }
-  };
+  const { height, width } = useScrollbarSize();
 
   return (
     <div style={styles}>
       <h2>React Scrollbar Size Demo</h2>
       <h4>Tip: Change browser zoom level to see scrollbar sizes change.</h4>
-      <ScrollbarSize onChange={scrollbarSizeChange} />
       <p>
-        {`The current height of the scrollbar is ${currentHeight}px.`}
+        The current height of the scrollbar is {height}px.
         <br />
-        {`The current width of the scrollbar is ${currentWidth}px.`}
+        The current width of the scrollbar is {width}px.
       </p>
     </div>
   );
@@ -86,37 +70,25 @@ const ScrollbarSizeDemo: FunctionComponent = () => {
 
 ### JavaScript
 ```jsx
-import React, { useState } from 'react';
-import ScrollbarSize from 'react-scrollbar-size';
+import React from 'react';
+import { useScrollbarSize } from 'react-scrollbar-size';
 
 const styles = {
   margin: '1rem',
   textAlign: 'center',
 };
 
 const ScrollbarSizeDemo = () => {
-  const [currentHeight, setHeight] = useState(0);
-  const [currentWidth, setWidth] = useState(0);
-
-  const scrollbarSizeChange = ({ height, width }) => {
-    if (height !== currentHeight) {
-      setHeight(height);
-    }
-
-    if (width !== currentWidth) {
-      setWidth(width);
-    }
-  };
+  const { height, width } = useScrollbarSize();
 
   return (
     <div style={styles}>
       <h2>React Scrollbar Size Demo</h2>
       <h4>Tip: Change browser zoom level to see scrollbar sizes change.</h4>
-      <ScrollbarSize onChange={scrollbarSizeChange} />
       <p>
-        {`The current height of the scrollbar is ${currentHeight}px.`}
+        The current height of the scrollbar is {height}px.
         <br />
-        {`The current width of the scrollbar is ${currentWidth}px.`}
+        The current width of the scrollbar is {width}px.
       </p>
     </div>
   );

example-component/README.md

@@ -0,0 +1,24 @@
+# React-Scrollbar-Size Example
+
+This is an example package for React-Scrollbar-Size.
+
+:warning: The componnt syntax in this example will be deprecated in version 4.  The [hook](/example/README.md) syntax should be used in favor of this.
+
+## Requirements
+- [Node](https://nodejs.org) 12.0 or newer
+
+## Installation
+After cloning the repository, install dependencies:
+```sh
+cd <project folder>/react-scrollbar-size
+npm install
+```
+
+## Running
+
+Once dependencies are installed, start the application with:
+```sh
+npm run example:component
+```
+
+Open `http://localhost:1234` to view the example site.

example-component/ScrollbarSizeDemo.tsx

@@ -0,0 +1,37 @@
+import React, { CSSProperties, FunctionComponent, useState } from 'react';
+import ScrollbarSize, { ScrollbarSizeChangeHandlerParams } from '../src';
+
+const styles: CSSProperties = {
+	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 (
+		<div style={styles}>
+			<h2>React Scrollbar Size Component Demo</h2>
+			<h4>Tip: Change browser zoom level to see scrollbar sizes change.</h4>
+			<ScrollbarSize onChange={scrollbarSizeChange} />
+			<p>
+				The current height of the scrollbar is {currentHeight}px.
+				<br />
+				The current width of the scrollbar is {currentWidth}px.
+			</p>
+		</div>
+	);
+};
+
+export default ScrollbarSizeDemo;

example-component/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+		<title>React-Scrollbar-Size Component Example</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script src='index.tsx'></script>
+	</body>
+</html>

example-component/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { render } from 'react-dom';
+import ScrollbarSizeDemo from './ScrollbarSizeDemo';
+import 'normalize.css';
+import './main.css';
+
+render(<ScrollbarSizeDemo />, document.getElementById('root'));

example-component/main.css

@@ -0,0 +1,13 @@
+html {
+  font-family: 'Roboto', sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+body, h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+}
+
+body {
+  font-size: 15px;
+  line-height: 24px;
+}

example/ScrollbarSizeDemo.tsx

@@ -1,34 +1,22 @@
-import React, { CSSProperties, FunctionComponent, useState } from 'react';
-import ScrollbarSize, { ScrollbarSizeChangeHandlerParams } from '../src';
+import React, { CSSProperties, FunctionComponent } from 'react';
+import { useScrollbarSize } from '../src';
 
 const styles: CSSProperties = {
 	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);
-		}
-	};
+	const { height, width } = useScrollbarSize();
 
 	return (
 		<div style={styles}>
 			<h2>React Scrollbar Size Demo</h2>
 			<h4>Tip: Change browser zoom level to see scrollbar sizes change.</h4>
-			<ScrollbarSize onChange={scrollbarSizeChange} />
 			<p>
-				{`The current height of the scrollbar is ${currentHeight}px.`}
+				The current height of the scrollbar is {height}px.
 				<br />
-				{`The current width of the scrollbar is ${currentWidth}px.`}
+				The current width of the scrollbar is {width}px.
 			</p>
 		</div>
 	);

example/index.html

@@ -4,7 +4,7 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
-		<title>React-Scrollbar-Size Examples</title>
+		<title>React-Scrollbar-Size Example</title>
 	</head>
 	<body>
 		<div id="root"></div>

jest.config.js

@@ -2,6 +2,7 @@ module.exports = {
 	resetMocks: true, // clear history and reset behavior of mocks between each test
 	restoreMocks: true, // restore initial behavior of mocked functions
 	moduleFileExtensions: ['js', 'ts', 'tsx'],
+	setupFilesAfterEnv: ['./test/jest-setup.ts'],
 	collectCoverageFrom: [
 		'**/src/**/*.ts', // typescript files
 		'**/src/**/*.tsx', // typescript files that render JSX