feat(use theme): implement react hook to get the current theme)

Author: danilowoz

README.md

@@ -98,6 +98,32 @@ const ThemeColorText = styl(Text)(({ theme }) => ({
 
 </details>
 
+<details>
+<summary><strong>useTheme:</strong></summary>
+
+The `useTheme` hook let you access the currently active theme.
+
+```jsx
+import { useTheme, Provider as StyleProvider } from "react-native-styl"
+
+const Main = ({ children }) => {
+  const theme = useTheme()
+
+  return <Text style={{ color: theme.brand }}>Foo</Text>
+}
+
+const App = () => {
+
+  return (
+    <StyleProvider theme={{ color: { brand: "blue" }}}>
+      <Main />
+    </StyleProvider>
+  )
+}
+```
+
+</details>
+
 <details>
 <summary><strong>Extends:</strong></summary>
 

lib/index.ts

@@ -1,4 +1,4 @@
-import { styl, Provider, DefaultTheme } from './styl'
+import { styl, Provider, DefaultTheme, useTheme } from './styl'
 
-export { styl, Provider, DefaultTheme }
+export { styl, Provider, DefaultTheme, useTheme }
 export default styl

lib/styl.test.tsx

@@ -1,8 +1,9 @@
 import React, { useRef } from 'react'
 import { Text, TouchableWithoutFeedback } from 'react-native'
 import renderer from 'react-test-renderer'
+import { renderHook } from '@testing-library/react-hooks'
 
-import { styl, Provider } from '.'
+import { styl, Provider, useTheme } from '.'
 
 describe('styl', () => {
   describe('render', () => {
@@ -164,6 +165,17 @@ describe('styl', () => {
       expect(render?.props.style.color).toBe(GOAL)
       expect(render).toMatchSnapshot()
     })
+
+    it('useTheme', () => {
+      const theme = { color: 'red' }
+      const wrapper: React.FC = ({ children }) => (
+        <Provider theme={theme}>{children}</Provider>
+      )
+
+      const { result } = renderHook(() => useTheme(), { wrapper })
+
+      expect((result.current as typeof theme).color).toBe(theme.color)
+    })
   })
 
   describe('ref', () => {

lib/styl.ts

@@ -77,6 +77,17 @@ const Context = createContext({ theme: {} })
 const Provider: React.FC<{ theme: DefaultTheme }> = ({ children, theme }) =>
   createElement(Context.Provider, { value: { theme }, children })
 
+/**
+ * useTheme
+ *
+ * Expose the `theme` as a React hook
+ */
+const useTheme = (): DefaultTheme => {
+  const { theme } = useContext(Context)
+
+  return theme
+}
+
 /**
  * styl
  *
@@ -124,4 +135,4 @@ const styl = <Comp extends ComponentType<any>>(Component: Comp) => <
   )
 }
 
-export { styl, Provider }
+export { styl, Provider, useTheme }

package-lock.json

@@ -29,6 +29,7 @@
     "@significa/eslint-config": "0.0.17",
     "@significa/prettier-config": "0.0.17",
     "@significa/tsconfig-config": "0.0.17",
+    "@testing-library/react-hooks": "^4.0.0",
     "@types/jest": "^25.2.2",
     "@types/react": "16.9.35",
     "@types/react-native": "0.62.9",

package.json

@@ -12,5 +12,5 @@
     "isolatedModules": false,
     "removeComments": true
   },
-  "exclude": ["node_modules", "examples"]
+  "exclude": ["node_modules", "examples", "jest.config.js", "commitlint.config.js"]
 }