Improve types and add tagName support

README.md

@@ -23,13 +23,9 @@ To use, wrap your tree with this component.
 
 ## Props
 
-### `toggle`
 
-By default, outlines are permanently shown after being enabled.
-
-Set the `toggle` prop to have React Outline Manager hide outlines again when the user resumes interacting with their
-mouse or with touch.
-
-### `className`
-
-Pass in a `className` as a string.
+|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.|
+|`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.|

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-outline-manager",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A simple helper for toggling CSS outlines.",
   "keywords": [
     "a11y",

src/index.tsx

@@ -1,22 +1,21 @@
 import * as React from 'react';
 
 interface Props {
-	children: JSX.Element,
+	children?: JSX.Element,
 	className: string,
+	tagName: string,
 	toggle: boolean,
 }
 
-const DEFAULT_CLASSNAME = 'ReactOutlineHandler';
-
 export default class ReactOutlineHander extends React.Component<Props, {}> {
 
-	state = {
-		isUsingKeyboard: false,
+	static defaultProps: Partial<Props> = {
+		className: 'ReactOutlineHandler',
+		tagName: 'div',
 	}
 
-	addListeners = () => {
-		window.addEventListener('keydown', this.handleTab);
-		if (this.props.toggle) window.addEventListener('mousedown', this.handleMouseDown);
+	state = {
+		isUsingKeyboard: false,
 	}
 
 	componentDidMount () {
@@ -28,6 +27,11 @@ export default class ReactOutlineHander extends React.Component<Props, {}> {
 		this.removeListeners();
 	}
 
+	addListeners = () => {
+		window.addEventListener('keydown', this.handleTab);
+		if (this.props.toggle) window.addEventListener('mousedown', this.handleMouseDown);
+	}
+
 	handleTab = ({ keyCode }: KeyboardEvent) => {
 		if (keyCode === 9) {
 			this.setState({ isUsingKeyboard: true });
@@ -41,7 +45,7 @@ export default class ReactOutlineHander extends React.Component<Props, {}> {
 
 	insertStyleTag = () => {
 		const script = document.createElement('style');
-		const className = this.props.className || DEFAULT_CLASSNAME;
+		const className = this.props.className;
 
 		script.id = className;
 		script.innerText = `.${className} a:focus,.${className} area:focus,.${className} button:focus,.${className} iframe:focus,.${className} input:focus,.${className} select:focus,.${className} textarea:focus,.${className} [tabindex]:focus,.${className} [contenteditable]:focus { outline: none; }`;
@@ -55,11 +59,12 @@ export default class ReactOutlineHander extends React.Component<Props, {}> {
 	}
 
 	render () {
-		const className = this.props.className || DEFAULT_CLASSNAME;
+		const className = this.props.className;
+		const Tag = this.props.tagName;
 		return (
-			<div {...!this.state.isUsingKeyboard ? { className } : null }>
+			<Tag {...!this.state.isUsingKeyboard ? { className } : null }>
 				{this.props.children}
-			</div>
+			</Tag>
 		);
 	}