From a6c38521804d1ef45596ac50f180fab6d5ca5c37 Mon Sep 17 00:00:00 2001
From: Richard Liu <richard.y.liu@berkeley.edu>
Date: Fri, 27 Oct 2023 13:35:40 -0700
Subject: [PATCH] add typed children prop to AppThemeProvider and update README

---
 README.md                      | 10 +++++-----
 src/theme/AppThemeProvider.tsx |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 22d47d0..bc0ac64 100644
--- a/README.md
+++ b/README.md
@@ -46,19 +46,19 @@ Integrate Skiff components into your project easily, as shown below:
 [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/button-example-rfp4jn)
 
 
-## ThemeProvider
-To display Skiff UI components correctly, add the ThemeProvider at the root of your app.
+## AppThemeProvider
+To display Skiff UI components correctly, add the AppThemeProvider at the root of your app.
 
 
 ```typescript
   import * as React from 'react';
-  import { ThemeProvider } from '@skiff-org/skiff-ui';
+  import { AppThemeProvider } from '@skiff-org/skiff-ui';
 
   function App({ Component }) {
     return (
-      <ThemeProvider>
+      <AppThemeProvider>
         <Component />
-      </ThemeProvider>
+      </AppThemeProvider>
     );
   }
 ```
diff --git a/src/theme/AppThemeProvider.tsx b/src/theme/AppThemeProvider.tsx
index 800a4b0..9e98898 100644
--- a/src/theme/AppThemeProvider.tsx
+++ b/src/theme/AppThemeProvider.tsx
@@ -1,5 +1,5 @@
 import noop from 'lodash/noop';
-import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
+import React, { PropsWithChildren, createContext, useCallback, useContext, useEffect, useState } from 'react';
 import { LocalStorageThemeMode, StorageOnlyThemeMode, ThemeMode } from 'src/types';
 import { createGlobalStyle, ThemeProvider } from 'styled-components';
 
@@ -38,7 +38,7 @@ const GlobalStyles = createGlobalStyle`
     font-smoothing: antialiased;
   }
 `;
-export const AppThemeProvider: React.FC = ({ children }) => {
+export const AppThemeProvider: React.FC<PropsWithChildren<{}>> = ({ children }) => {
   const [themeName, setThemeName] = useState<ThemeMode>(ThemeMode.DARK);
   const [storedThemeState, setStoredThemeState] = useState<LocalStorageThemeMode>(StorageOnlyThemeMode.SYSTEM);