react-jsbox - npm Package Compare versions

Comparing version 0.0.18 to 0.0.19

package.json

 {
   "name": "react-jsbox",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "A Custom React Renderer for writing JSBox apps in React.",
@@ -57,4 +57,3 @@ "keywords": [
   "dependencies": {
-    "react-reconciler": "alpha",
-    "warning": "^4.0.3"
+    "react-reconciler": "alpha"
   },
@@ -61,0 +60,0 @@ "devDependencies": {

README.md

@@ -13,10 +13,12 @@ # react-jsbox-renderer
 
-### Examples
+Example App: <https://github.com/Nicify/react-jsbox-example>
 
-#### Classes
+## Examples
 
+### Classes
+
 ```javascript
 import React from 'react'
 import ReactJSBox from 'react-jsbox'
-const { width, height } = $device.info.screen
+const {width, height} = $device.info.screen
 
@@ -85,3 +87,3 @@ // Create a root Container:
           events={{
-            didSelect: (sender, { row }, data) =>
+            didSelect: (sender, {row}, data) =>
               this.setState({
@@ -112,3 +114,3 @@ count: this.state.count + [1, -1, -this.state.count][row]
 import * as ReactJSBox from 'react-jsbox'
-const { width, height } = $device.info.screen
+const {width, height} = $device.info.screen
 
@@ -163,3 +165,3 @@ // Create a root Container:
   handleTextChange(sender) {
-    this.setState({ text: sender.text })
+    this.setState({text: sender.text})
   }
@@ -217,8 +219,10 @@
 
-#### React Hooks
+### React Hooks
 
+#### useReducer
+
 ```javascript
 import React from 'react'
 import ReactJSBox from 'react-jsbox'
-const { width, height } = $device.info.screen
+const {width, height} = $device.info.screen
 
@@ -247,7 +251,7 @@ // Create a root Container:
     case 'INCREASE':
-      return { ...state, count: state.count + 1 }
+      return {...state, count: state.count + 1}
     case 'DECREASE':
-      return { ...state, count: state.count - 1 }
+      return {...state, count: state.count - 1}
     case 'RESET':
-      return { ...state, count: 0 }
+      return {...state, count: 0}
     default:
@@ -259,3 +263,3 @@ throw new Error()
 const App = () => {
-  const [state, dispatch] = React.useReducer(counterReducer, { count: 0 })
+  const [state, dispatch] = React.useReducer(counterReducer, {count: 0})
   const listTemplate = {
@@ -295,3 +299,3 @@ props: {
         events={{
-          didSelect: (sender, indexPath, data) => dispatch({ type: data })
+          didSelect: (sender, indexPath, data) => dispatch({type: data})
         }}
@@ -312,1 +316,156 @@ />
 ```
+
+#### Use Effect
+
+In **useMotion.js**
+
+```javascript
+import {useEffect, useState} from 'react'
+
+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)
+    }
+
+    $motion.startUpdates({
+      interval: 1 / 30,
+      handler
+    })
+
+    return () => {
+      $motion.stopUpdates()
+    }
+  }, [])
+
+  return [state]
+}
+
+export default useMotion
+```
+
+In **app.js**
+
+```javascript
+import React from 'react'
+import ReactJSBox from 'react-jsbox'
+import rootContainer from './Containers/root'
+const {width, height} = $device.info.screen
+
+// Create React Components:
+class App extends React.PureComponent {
+  constructor(props) {
+    super(props)
+    this.state = {
+      count: 0
+    }
+    this._listTemplate = {
+      props: {
+        bgcolor: $color('#fff')
+      },
+      views: [
+        {
+          type: 'label',
+          props: {
+            bgcolor: $color('#474b51'),
+            textColor: $color('#abb2bf'),
+            align: $align.center,
+            font: $font('iosevka', 24)
+          },
+          layout: $layout.fill
+        }
+      ]
+    }
+  }
+
+  render() {
+    return (
+      <view frame={styles.container}>
+        <label
+          frame={styles.text}
+          align={$align.center}
+          font={$font('ArialRoundedMTBold', 26)}
+          text={String(this.state.count)}
+          autoFontSize={true}
+        />
+        <list
+          frame={styles.list}
+          scrollEnabled={false}
+          radius={10}
+          bgcolor={$color('#ededed')}
+          data={['INCREASE', 'DECREASE', 'RESET']}
+          template={this._listTemplate}
+          events={{
+            didSelect: (sender, {row}, data) =>
+              this.setState({
+                count: this.state.count + [1, -1, -this.state.count][row]
+              })
+          }}
+        />
+      </view>
+    )
+  }
+}
+
+let styles = {
+  container: $rect(0, 0, width, height - 40),
+  text: $rect(0, 64, width, 30),
+  list: $rect(0, (height - 40) * 0.3, width, 132)
+}
+
+// Create a root Container:
+$ui.render(rootContainer)
+
+// Create React elements and render them:
+ReactJSBox.render(<App />, $('root'))
+```

No alert changes

Improved metrics

Total package byte prevSize

96936

increased by3.08%

Dependency count

2

decreased by-33.33%

Number of lines in readme file

463

increased by52.3%

Dependency changes

• - Removedwarning@^4.0.3

• - Removedjs-tokens@4.0.0(transitive)

• - Removedloose-envify@1.4.0(transitive)

• - Removedwarning@4.0.3(transitive)