react-jsbox - npm Package Compare versions

Comparing version 0.0.32 to 0.0.33

package.json

 {
   "name": "react-jsbox",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "description": "A Custom React Renderer for writing JSBox apps in React.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -1,4 +0,7 @@
-# react-jsbox
+<h1 align="center">Welcome to react-jsbox 👋</h1>
+<p>
+  <img src="https://img.shields.io/badge/version-0.0.32-blue.svg?cacheSeconds=2592000" />
+</p>
 
-A `Custom Renderer` for writing `JSBox` apps in `React`.
+> A Custom React Renderer for writing JSBox apps in React.
 
@@ -17,3 +20,3 @@ This package is experimental **Use it at your own risk.**
 
-### Classes
+### Class
 
@@ -98,3 +101,3 @@ ```javascript
 
-let styles = {
+const styles = {
   container: $rect(0, 0, width, height - 40),
@@ -188,3 +191,3 @@ text: $rect(0, 64, width, 30),
 
-let styles = {
+const styles = {
   container: $rect(0, 0, width, height - 40),
@@ -199,3 +202,3 @@ text: $rect(0, 64, width, 30),
 
-### React Hooks
+### Hooks
 
@@ -284,3 +287,3 @@ #### useReducer
 
-let styles = {
+const styles = {
   container: $rect(0, 0, width, height - 40),
@@ -295,5 +298,5 @@ text: $rect(0, 64, width, 30),
 
-#### Use Effect
+#### UseEffect
 
-In **useMotion.js**
+In **useCache.js**
 
@@ -303,70 +306,17 @@ ```javascript
 
-const defaultState = {
-  attitude: {
-    yaw: null,
-    quaternion: {
-      y: null,
-      w: null,
-      z: null,
-      x: null
-    },
-    rotationMatrix: {
-      m31: null,
-      m21: null,
-      m11: null,
-      m33: null,
-      m23: null,
-      m13: null,
-      m32: null,
-      m22: null,
-      m12: null
-    },
-    pitch: null,
-    roll: null
-  },
-  magneticField: {
-    field: {
-      x: null,
-      y: null,
-      z: null
-    },
-    accuracy: null
-  },
-  rotationRate: {
-    x: null,
-    y: null,
-    z: null
-  },
-  acceleration: {
-    x: null,
-    y: null,
-    z: null
-  },
-  gravity: {
-    x: null,
-    y: null,
-    z: null
-  }
-}
-
-const useMotion = (initialState = defaultState) => {
-  const [state, setState] = useState(initialState)
-
-  useEffect(() => {
-    const handler = resp => {
-      setState(resp)
+const useCache = (key, initialValue) => {
+  const [state, setState] = useState(() => {
+    const cacheValue = $cache.get(key)
+    if (cacheValue === undefined) {
+      $cache.set(key, initialValue)
+      return initialValue
     }
+    return cacheValue
+  })
+  useEffect(() => $cache.set(key, state))
 
-    $motion.startUpdates({
-      interval: 1 / 30,
-      handler
-    })
-
-    return () => $motion.stopUpdates()
-  }, [])
-
-  return [state]
+  return [state, setState]
 }
 
-export default useMotion
+export default useCache
 ```
@@ -379,17 +329,43 @@
 import ReactJSBox from 'react-jsbox'
+import useCache from './useCache'
 import rootContainer from './Containers/root'
-import useMotion from './hooks/useMotion'
 const {width, height} = $device.info.screen
 
 const App = () => {
-  const [state] = useMotion()
+  const [count, setCount] = useCache('count', 0)
+  const listTemplate = {
+    views: [
+      {
+        type: 'label',
+        props: {
+          bgcolor: $color('#474b51'),
+          textColor: $color('#abb2bf'),
+          align: $align.center,
+          font: $font('iosevka', 24)
+        },
+        layout: $layout.fill
+      }
+    ]
+  }
 
   return (
     <view frame={styles.container}>
-      <text
-        frame={styles.container}
-        font={$font(12)}
-        text={JSON.stringify(state, null, 2)}
+      <label
+        frame={styles.text}
+        align={$align.center}
+        font={$font('ArialRoundedMTBold', 26)}
+        text={String(count)}
         autoFontSize={true}
       />
+      <list
+        frame={styles.list}
+        scrollEnabled={false}
+        radius={5}
+        bgcolor={$color('#ededed')}
+        data={['INCREASE', 'DECREASE', 'RESET']}
+        template={listTemplate}
+        events={{
+          didSelect: (sender, {row}, data) => setCount(count => count + [1, -1, -count][row])
+        }}
+      />
     </view>
@@ -399,4 +375,6 @@ )
 
-let styles = {
-  container: $rect(0, 0, width, height - 40)
+const styles = {
+  container: $rect(0, 0, width, height - 40),
+  text: $rect(0, 64, width, 30),
+  list: $rect(0, (height - 40) * 0.3, width, 132)
 }
@@ -410,1 +388,11 @@
 ```
+
+## Author
+
+👤 **Eva1ent**
+
+- Github: [@Nicify](https://github.com/Nicify)
+
+## Show your support
+
+Give a ⭐️ if this project helped you !

No alert changes

Improved metrics

Total package byte prevSize

102176

0.39%

Worsened metrics

Number of lines in readme file

389

-2.99%

No dependency changes