Merge pull request #290 from scriptex/feature/hooks

Use hooks

.npmignore

@@ -36,7 +36,10 @@ yarn.lock
 
 # Config files
 .babelrc
+.github
+.whitesource
 renovate.json
 webpack.config.js
 _config.yml
 _.config.yml
+__test__

README.md

@@ -8,7 +8,9 @@
 
 # React SVG Donuts
 
-A ReactJS component for simple (and complex) SVG donuts.
+> A ReactJS component for simple (and complex) SVG donuts.
+
+**The current version depends on the Hooks API introduced with React 16. If you need legacy React support, please use a 1.x.x version.**
 
 ## Demo
 

__test__/__snapshots__/index.test.js.snap

@@ -113,6 +113,8 @@ exports[`Donuts should render a complex donut 1`] = `
 </div>
 `;
 
+exports[`Donuts should render a complex donut 2`] = `null`;
+
 exports[`Donuts should render a simple donut with custom props 1`] = `
 <div
   className="donut"

__test__/index.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import renderer, { act } from 'react-test-renderer';
+
 import Donut from '../src';
 import ComplexDonut from '../src/complex';
 
@@ -17,38 +18,46 @@ describe('Donuts', () => {
 	});
 
 	it('should render a complex donut', () => {
-		const tree = renderer.create(
-			<ComplexDonut
-				size={200}
-				radius={80}
-				segments={[
-					{
-						color: '#FF8A80',
-						value: 230
-					},
-					{
-						color: '#FF80AB',
-						value: 308
-					},
-					{
-						color: '#B9F6CA',
-						value: 520
-					},
-					{
-						color: '#B388FF',
-						value: 130
-					},
-					{
-						color: '#8C9EFF',
-						value: 200
-					}
-				]}
-				thickness={40}
-				startAngle={-90}
-				textProps={{}}
-				circleProps={{}}
-			/>
-		);
+		let tree;
+
+		act(() => {
+			tree = renderer.create(
+				<ComplexDonut
+					size={200}
+					radius={80}
+					segments={[
+						{
+							color: '#FF8A80',
+							value: 230
+						},
+						{
+							color: '#FF80AB',
+							value: 308
+						},
+						{
+							color: '#B9F6CA',
+							value: 520
+						},
+						{
+							color: '#B388FF',
+							value: 130
+						},
+						{
+							color: '#8C9EFF',
+							value: 200
+						}
+					]}
+					thickness={40}
+					startAngle={-90}
+					textProps={{}}
+					circleProps={{}}
+				/>
+			);
+		});
+
+		expect(tree).toMatchSnapshot();
+
+		tree.unmount();
 
 		expect(tree).toMatchSnapshot();
 	});