docs: add simple docs for v1.0

README.md

@@ -2,13 +2,12 @@
 
 Resval stands for Responsive Values, which is a hook that can return a value based on the current breakpoint. This hook can also respond to the size of the window.
 
-⚒️ For now, Resval is only available for React, and hopefully available for the DOM as well.
-
 ### Why?
 
-⚛️ React Responsive Values (Combine with themes from UI Libs, such as MUI, Chakra-UI, etc)\
+⚛️ React Responsive Values (Combine with themes from UI Libs, such as MUI, Chakra UI, etc)\
 🐳 Full TypeScript Support!\
-🤠 Arbitrary Breakpoints!
+🤠 Arbitrary Breakpoints!\
+⚡ Optimized Performance!
 
 # Installation
 
@@ -27,23 +26,38 @@ $ npm i @resval/react-responsive-values
 ```jsx
 import { createResponsiveValues } from '@resval/react-responsive-values'
 
-const breakpoints = {
-  base: '0px',
-  xs: '320px',
-  sm: '576px',
-  md: '768px',
-  lg: '1080px',
-  xl: '1280px',
-}
-
 const useVx = createResponsiveValues({
-  breakpoints: { ...breakpoints },
+  breakpoints: {
+    base: '0px',
+    xs: '320px',
+    sm: '576px',
+    md: '768px',
+    lg: '1080px',
+    xl: '1280px',
+  },
   media: 'min',
 })
 
+const useResval = () => {
+  return useVx({
+    fontSize: {
+      base: '12px',
+      md: '24px',
+    },
+    color: {
+      base: 'red',
+      '600px': 'blue',
+      lg: 'black',
+    },
+    isMobileView: {
+      base: true,
+      md: false,
+    },
+  })
+}
+
 export function Component() {
-  const fontSize = useVx({ base: '12px', md: '24px' })
-  const color = useVx({ base: 'red', '600px': 'blue', lg: 'black' })
+  const { fontSize, color } = useResval()
   return (
     <div>
       <h1 style={{ fontSize, color }}>Hello World!</h1>
@@ -52,9 +66,14 @@ export function Component() {
 }
 
 export default function About() {
-  const isMobileView = useVx({ base: true, md: false })
+  const { isMobileView } = useResval()
   return isMobileView ? <h3>Mobile View</h3> : <h1>Desktop View</h1>
 }
 ```
 
 # Contributing
+
+# Story
+
+- Better abstraction in v1.0 - [Read More](https://github.com/nurulakbaral/resval/pull/4)
+- Rendering optimization in v1.0 - [Read More](https://github.com/nurulakbaral/resval/pull/5)

packages/react-resval/README.md

@@ -4,9 +4,10 @@ Resval stands for Responsive Values, which is a hook that can return a value bas
 
 ### Why?
 
-⚛️ React Responsive Values (Combine with themes from UI Libs, such as MUI, Chakra-UI, etc)\
+⚛️ React Responsive Values (Combine with themes from UI Libs, such as MUI, Chakra UI, etc)\
 🐳 Full TypeScript Support!\
-🤠 Arbitrary Breakpoints!
+🤠 Arbitrary Breakpoints!\
+⚡ Optimized Performance!
 
 # Installation
 
@@ -25,23 +26,38 @@ $ npm i @resval/react-responsive-values
 ```jsx
 import { createResponsiveValues } from '@resval/react-responsive-values'
 
-const breakpoints = {
-  base: '0px',
-  xs: '320px',
-  sm: '576px',
-  md: '768px',
-  lg: '1080px',
-  xl: '1280px',
-}
-
 const useVx = createResponsiveValues({
-  breakpoints: { ...breakpoints },
+  breakpoints: {
+    base: '0px',
+    xs: '320px',
+    sm: '576px',
+    md: '768px',
+    lg: '1080px',
+    xl: '1280px',
+  },
   media: 'min',
 })
 
+const useResval = () => {
+  return useVx({
+    fontSize: {
+      base: '12px',
+      md: '24px',
+    },
+    color: {
+      base: 'red',
+      '600px': 'blue',
+      lg: 'black',
+    },
+    isMobileView: {
+      base: true,
+      md: false,
+    },
+  })
+}
+
 export function Component() {
-  const fontSize = useVx({ base: '12px', md: '24px' })
-  const color = useVx({ base: 'red', '600px': 'blue', lg: 'black' })
+  const { fontSize, color } = useResval()
   return (
     <div>
       <h1 style={{ fontSize, color }}>Hello World!</h1>
@@ -50,9 +66,14 @@ export function Component() {
 }
 
 export default function About() {
-  const isMobileView = useVx({ base: true, md: false })
+  const { isMobileView } = useResval()
   return isMobileView ? <h3>Mobile View</h3> : <h1>Desktop View</h1>
 }
 ```
 
 # Contributing
+
+# Story
+
+- Better abstraction in v1.0 - [Read More](https://github.com/nurulakbaral/resval/pull/4)
+- Rendering optimization in v1.0 - [Read More](https://github.com/nurulakbaral/resval/pull/5)