Add useAriaLive hook

README.md

@@ -121,4 +121,30 @@ class MyApp extends Component {
 export default MyApp;
 ```
 
-If you want to use these functions in lifecycle hooks, please pass them as props to the component in question.
+If you want to use these functions in lifecycle hooks, please pass them as props to the component in question, or if you're using React 16.8+ use the `useAriaLive` hook:
+
+```
+const MyFunctionalComponent = () => {
+  const { announcePolite, announceAssertive } = useAriaLive();
+  return (
+    <Fragment>
+      <button
+        type="button"
+        onClick={() => {
+          announceAssertive('ASSERTIVE MESSAGE');
+        }}>
+        Press me for an assertive message
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          announcePolite('Polite message');
+        }}>
+        Press me for a Polite message
+      </button>
+    </Fragment>
+  );
+};
+```
+
+Please note that your functional component should be rendered inside a `LiveAnnouncer`.

demo/src/index.js

@@ -5,7 +5,29 @@ import uuidv4 from 'uuid/v4';
 import LiveAnnouncer from '../../src/modules/LiveAnnouncer';
 import LiveMessage from '../../src/modules/LiveMessage';
 import LiveMessenger from '../../src/modules/LiveMessenger';
+import useAriaLive from '../../src/modules/useAriaLive';
 
+const MyFunctionalComponent = () => {
+  const { announcePolite, announceAssertive } = useAriaLive();
+  return (
+    <Fragment>
+      <button
+        type="button"
+        onClick={() => {
+          announceAssertive('HELLO WORLD WITH HOOK');
+        }}>
+        Click for assertive message via hook
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          announcePolite('Hello world with hook');
+        }}>
+        Click for polite message via hook
+      </button>
+    </Fragment>
+  );
+};
 class Demo extends Component {
   constructor(props) {
     super(props);
@@ -100,6 +122,7 @@ class Demo extends Component {
                     }}>
                     Rebroadcast the same message
                   </button>
+                  <MyFunctionalComponent />
                 </Fragment>
               )}
             </LiveMessenger>

package.json

@@ -21,16 +21,15 @@
     "uuid": "^3.2.1"
   },
   "peerDependencies": {
-    "react": "^16.3.x"
+    "react": "^16.8.x || ^17"
   },
   "devDependencies": {
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
     "babel-core": "6.26.0",
     "babel-eslint": "7.2.3",
     "babel-jest": "20.0.3",
     "babel-preset-react-app": "^3.1.1",
     "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.10.0",
-    "enzyme-context-patch": "0.0.7",
     "enzyme-to-json": "3.3.0",
     "eslint": "4.10.0",
     "eslint-config-react-app": "2.1.0",
@@ -43,9 +42,9 @@
     "nwb": "0.22.x",
     "prettier": "1.12.1",
     "prop-types": "15.6.1",
-    "react": "16.4.0",
-    "react-dom": "16.4.0",
-    "react-test-renderer": "16.4.0"
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "react-test-renderer": "17.0.1"
   },
   "jest": {
     "collectCoverageFrom": [

src/index.js

@@ -1,3 +1,4 @@
 export LiveAnnouncer from './modules/LiveAnnouncer';
 export LiveMessage from './modules/LiveMessage';
 export LiveMessenger from './modules/LiveMessenger';
+export useAriaLive from './modules/useAriaLive';

src/modules/__tests__/useAriaLive.spec.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import LiveAnnouncer from '../LiveAnnouncer';
+import useAriaLive from '../useAriaLive';
+
+function AssertiveFC() {
+  const { announceAssertive } = useAriaLive();
+  return <button onClick={() => announceAssertive('Demo message')} />;
+}
+
+function PoliteFC() {
+  const { announcePolite } = useAriaLive();
+  return <button onClick={() => announcePolite('Demo message')} />;
+}
+
+function testContext() {
+  const returnVal = {};
+  function TestComponent() {
+    Object.assign(returnVal, useAriaLive());
+    return null;
+  }
+  mount(<TestComponent />);
+  return returnVal;
+}
+
+describe('useAriaLive', () => {
+  it('should announce assertive messages', () => {
+    const wrapper = mount(
+      <LiveAnnouncer>
+        <AssertiveFC />
+      </LiveAnnouncer>
+    );
+
+    wrapper.find('button').simulate('click');
+
+    expect(
+      wrapper
+        .find('MessageBlock')
+        .at(0)
+        .text()
+    ).toBe('Demo message');
+    expect(
+      wrapper
+        .find('MessageBlock')
+        .at(1)
+        .text()
+    ).toBe('');
+    expect(
+      wrapper
+        .find('MessageBlock')
+        .at(2)
+        .text()
+    ).toBe('');
+    expect(
+      wrapper
+        .find('MessageBlock')
+        .at(3)
+        .text()
+    ).toBe('');
+  });
+
+  it('should announce polite messages', () => {
+    const wrapper = mount(
+      <LiveAnnouncer>
+        <PoliteFC />
+      </LiveAnnouncer>
+    );
+
+    wrapper.find('button').simulate('click');
+
+    expect(
+      wrapper
+        .find('MessageBlock')
+        .at(0)
+        .text()
+    ).toBe('');
+    expect(
+      wrapper
+        .find('MessageBlock')
+        .at(1)
+        .text()
+    ).toBe('');
+    expect(
+      wrapper
+        .find('MessageBlock')
+        .at(2)
+        .text()
+    ).toBe('Demo message');
+    expect(
+      wrapper
+        .find('MessageBlock')
+        .at(3)
+        .text()
+    ).toBe('');
+  });
+
+  it('should pass dummy functions without LiveAnnouncer', () => {
+    const context = testContext();
+    expect(context).toBeDefined();
+    expect(context).toHaveProperty('announceAssertive');
+    expect(typeof context.announceAssertive).toBe('function');
+    expect(context).toHaveProperty('announcePolite');
+    expect(typeof context.announcePolite).toBe('function');
+  });
+});

src/modules/useAriaLive.js

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+import AnnouncerContext from '../modules/AnnouncerContext';
+
+const useAriaLive = () => useContext(AnnouncerContext);
+export default useAriaLive;

src/setupTests.js

@@ -1,4 +1,4 @@
 import { configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 
 configure({ adapter: new Adapter() });