Add fragment support and update docs (#2)

* Update docs

* Update default className

* Add prop pass-through

* Scaffold Fragment in render

* Update dependencies and remove demo UMD

* Update docs and add license

* Fix toggle issue when using Fragment

* Update dev dependencies

.gitignore

@@ -1,4 +1,5 @@
 /dist
 /node_modules
+index.umd.js
 npm-debug.log
 yarn-error.log

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Brody McKee
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,31 +1,60 @@
-# react-outline-manager
+# React Outline Manager
 
-A simple component to help manage outlines in React applications.
+[![license](https://img.shields.io/npm/l/react-outline-manager.svg)](https://github.com/mrmckeb/react-outline-manager/blob/develop/LICENSE)
+[![npm](https://img.shields.io/npm/v/react-outline-manager.svg)](https://www.npmjs.com/package/react-outline-manager)
+[![type definitions](https://img.shields.io/npm/types/react-outline-manager.svg)](https://www.typescriptlang.org/)
+
+A simple component to help manage focus outlines in React applications. No dependencies.
+
+Includes CJS, ESM, and UMD (supporting browser usage) packages. TypeScript definitions are also included.
 
 ## How it works
 
-Outlines on focussable elements are hidden by default, but shown if a user begins to interact with their keyboard
-(specifically, the `tab` key).
+Unlike CSS-only solutions that simply hide outlines on focusable elements, this component can help you to create
+beautiful web apps without sacrificing accessibility.
 
-Includes CJS, ESM, and UMD (supporting browser usage).
+When using this component, outlines on focusable elements are hidden until a user begins to interact with keyboard
+(specifically, the `tab` key). Optionally, resuming mouse/touch input can hide outlines again.
 
-TypeScript definitions are also included.
+From version [v1.2.0](https://github.com/mrmckeb/react-outline-manager/releases/tag/v1.1.0) and above, React v16.2+ is
+required due to the introduction of `Fragment` support.
 
 ## Usage
 
-To use, wrap your tree with this component.
+To install with Yarn:
+```sh
+yarn add react-outline-manager
+```
 
+To install with npm:
+```sh
+npm install --save react-outline-manager
 ```
-<ReactOutlineManager>
-  <YourApp />
-</ReactOutlineManager>
+
+Once installed, simply import React Outline Manager and wrap your your application.
+
+```js
+import ReactOutlineManager from 'react-outline-manager';
+
+const MyAppWithOutlineManager = () => (
+  <ReactOutlineManager>
+    <YourApp />
+  </ReactOutlineManager>
+);
 ```
 
-## Props
+Only wrapped components will be affected. This means that you can also choose to only wrap a part of you application if
+desired.
 
+## Props
 
 |Prop       |Default value        |Description|
 |-----------|---------------------|-----------|
-|`className`|`ReactOutlineHandler`|Use this to change the class of the wrapping component. This class is only visible when outlines should be hidden.|
-|`tagName`  |`div`                |Use this to change the element type used in the wrapping component.|
+|`className`|`ReactOutlineManager`|Use this to change the class of the wrapping component. This class is only visible when outlines should be hidden.|
+|`tagName`  |`false`              |Use this to change the element type used in the wrapping component, such as a `div`. When `false` (or omitted), this component renders as a `Fragment` and the `className` will be applied to the `body` tag.|
 |`toggle`   |`false`              |By default, outlines are enabled when a user hits tab, but not hidden again. Set this option to `true` if you want outlines to toggle on and off as the user switches between input methods.|
+
+When `tagName` is set, you may also pass through standard React HTML props. For example:
+```js
+<ReactOutlineManager onClick={() => {}} />
+```

package.json

@@ -40,25 +40,25 @@
     "dist"
   ],
   "peerDependencies": {
-    "react": ">=15.0.0"
+    "react": ">=16.2.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.0.0",
-    "@babel/core": "^7.0.0",
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
+    "@babel/cli": "^7.1.0",
+    "@babel/core": "^7.1.0",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
-    "@babel/preset-typescript": "^7.0.0",
-    "@types/react": "^16.4.13",
-    "jest": "^23.5.0",
-    "react": "^16.5.0",
-    "react-dom": "^16.5.0",
-    "rollup": "^0.65.2",
+    "@babel/preset-typescript": "^7.1.0",
+    "@types/react": "^16.4.14",
+    "jest": "^23.6.0",
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2",
+    "rollup": "^0.66.2",
     "rollup-plugin-babel": "^4.0.3",
     "rollup-plugin-node-resolve": "^3.4.0",
     "rollup-plugin-replace": "^2.0.0",
-    "rollup-plugin-uglify": "^5.0.2",
-    "serve": "^10.0.0",
+    "rollup-plugin-uglify": "^6.0.0",
+    "serve": "^10.0.1",
     "typescript": "^3.0.3"
   },
   "dependencies": {}

src/index.tsx

@@ -1,26 +1,34 @@
-import * as React from 'react';
+import { Component, Fragment } from 'react';
 
-interface Props {
-	children?: JSX.Element,
+interface Props extends React.HTMLProps<HTMLElement> {
 	className: string,
-	tagName: string,
+	tagName?: string,
 	toggle: boolean,
 }
 
-export default class ReactOutlineHander extends React.Component<Props, {}> {
+interface State {
+	isUsingKeyboard: boolean,
+}
+
+export default class ReactOutlineHander extends Component<Props, State> {
 
 	static defaultProps: Partial<Props> = {
-		className: 'ReactOutlineHandler',
-		tagName: 'div',
+		className: 'ReactOutlineManager',
 	}
 
-	state = {
+	state: State = {
 		isUsingKeyboard: false,
 	}
 
 	componentDidMount () {
 		this.addListeners();
 		this.insertStyleTag();
+		if (!this.props.tagName) this.updateClassName(this.props.className);
+	}
+
+	componentDidUpdate () {
+		if (this.props.tagName) return;
+		this.updateClassName(this.props.className);
 	}
 
 	componentWillUnmount () {
@@ -58,14 +66,22 @@ export default class ReactOutlineHander extends React.Component<Props, {}> {
 		window.removeEventListener('mousedown', this.handleMouseDown);
 	}
 
+	updateClassName = (className: string) => {
+		if (this.state.isUsingKeyboard) {
+			document.body.classList.remove(className);
+		} else {
+			document.body.classList.add(className);
+		}
+	}
+
 	render () {
-		const className = this.props.className;
-		const Tag = this.props.tagName;
-		return (
-			<Tag {...!this.state.isUsingKeyboard ? { className } : null }>
-				{this.props.children}
-			</Tag>
-		);
+		const { children, className, toggle, tagName: Tag, ...rest } = this.props;
+
+		if (!Tag) return <Fragment>{children}</Fragment>;
+
+		const props = { ...rest };
+		if (!this.state.isUsingKeyboard) Object.assign(props, { className });
+		return <Tag { ...props } />;
 	}
 
 }