Merge pull request #26 from bluebill1049/react-native

React native

README.md

@@ -17,6 +17,7 @@ State management made super simple
 - Tiny with 0 dependency and simple (less than 1kb)
 - Persist state by default (`sessionStorage`)
 - Build with React Hooks
+- Compatible with React Native
 
 <h2>📦 Installation</h2>
 
@@ -117,6 +118,10 @@ import yourDetail from './yourDetail'
 import YourComponent from './yourComponent'
 import { StateMachineProvider, createStore, DevTool } from 'little-state-machine'
 
+// The following code is for React Native usage
+// import { AsyncStorage } from "react-native";
+// setStorageType(AsyncStorage);
+
 // create your store
 createStore({
   yourDetail,

package.json

@@ -1,7 +1,7 @@
 {
   "name": "little-state-machine",
   "sideEffects": false,
-  "version": "2.11.3",
+  "version": "2.11.4-beta.7",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",

src/components/DevTool.tsx

@@ -13,7 +13,7 @@ export let actions: { name: string; state: Object }[] = [];
 let previousStateIndex = -1;
 let previousIsLoadPanelShow = false;
 const config =
-  typeof window !== 'undefined'
+  typeof window !== 'undefined' && typeof document !== 'undefined'
     ? // @ts-ignore
       JSON.parse(
         window.localStorage.getItem(STATE_MACHINE_DEV_TOOL_CONFIG) ||
@@ -35,7 +35,7 @@ let previousIsClose = config.isClose;
 const DevTool = ({
   buttonBottom,
   buttonTop,
-  iconSize
+  iconSize,
 }: {
   buttonBottom?: string | number;
   buttonTop?: string | number;
@@ -132,7 +132,7 @@ const DevTool = ({
           fontSize: 15,
           lineHeight: '15px',
           border: 0,
-          borderRadius: 0
+          borderRadius: 0,
         }}
         onClick={() => closePanel()}
       >

src/components/DevToolStateTree.tsx

@@ -6,7 +6,7 @@ import { useState } from 'react';
 import search from '../logic/filterObject';
 const clone = require('lodash.clonedeep');
 let ReactJson = (props: any) => <div {...props} />;
-if (typeof window !== 'undefined') {
+if (typeof window !== 'undefined' && typeof document !== 'undefined') {
   ReactJson = require('react-json-view').default;
 }