fix: 🏷️ Fix TimeProvider.children type

Adjusts the `children` prop type of `TimeProvider` to accept `ReactNode` in order to work with the default type of `React.FC` components.

Author: peterjuras

README.md

@@ -150,14 +150,15 @@ You can use a `<TimeProvider>` component to use a custom instance of `TimeSync`,
 Example:
 
 ```js
+import { useState } from "react";
 import { TimeProvider } from "react-time-sync";
 import TimeSync from "time-sync";
 
-const App = ({ content }) => {
-  const timeSync = new TimeSync();
+const App = ({ children }) => {
+  const [timeSync] = useState(() => new TimeSync());
   return (
     <div>
-      <TimeProvider timeSync={timeSync}>{content}</TimeProvider>
+      <TimeProvider timeSync={timeSync}>{children}</TimeProvider>
     </div>
   );
 };

src/__snapshots__/time-provider.test.tsx.snap

@@ -1,5 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`#TimeProvider should accept default ReactProps.children type as children 1`] = `
+<DocumentFragment>
+  <div>
+    Test1
+  </div>
+  <div>
+    Test2
+  </div>
+</DocumentFragment>
+`;
+
 exports[`#TimeProvider should render a single child 1`] = `
 <DocumentFragment>
   <div>

src/time-provider.test.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import TimeContext from "./context";
 import TimeProvider from "./time-provider";
+import PropTypes from "prop-types";
+import TimeSync from "time-sync";
 import { render, cleanup } from "@testing-library/react";
 
 declare const require: any;
@@ -127,13 +129,33 @@ describe("#TimeProvider", () => {
       );
     }
 
+    const timeSync = new TimeSync();
     const { unmount } = render(
-      <TimeProvider timeSync={new TimeSync()}>
+      <TimeProvider timeSync={timeSync}>
         <ContextConsumer />
       </TimeProvider>
     );
     unmount();
 
     expect(addTimer).toHaveBeenCalledTimes(1);
   });
+
+  it("should accept default ReactProps.children type as children", () => {
+    const timeSync = new TimeSync();
+
+    const ExampleWrapper: React.FC = ({ children }) => {
+      return <TimeProvider timeSync={timeSync}>{children}</TimeProvider>;
+    };
+    ExampleWrapper.propTypes = {
+      children: PropTypes.node,
+    };
+
+    const { asFragment } = render(
+      <ExampleWrapper>
+        <div>Test1</div>
+        <div>Test2</div>
+      </ExampleWrapper>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

src/time-provider.tsx

@@ -1,10 +1,10 @@
-import React, { Component, ReactElement } from "react";
+import React, { Component, ReactNode } from "react";
 import PropTypes from "prop-types";
 import TimeContext, { TimeSyncContext } from "./context";
 import TimeSync from "time-sync";
 
 interface TimeProviderProps {
-  children: ReactElement | ReactElement[];
+  children: ReactNode;
   timeSync: TimeSync;
 }