### Full State Management Example with Little State Machine (TypeScript)

Source: https://github.com/beekai-oss/little-state-machine/blob/master/README.md

This comprehensive example demonstrates the integration of `createStore` for initial setup, an `updateName` action to modify state, a `selector` for conditional rendering, and two React components (`YourComponent`, `YourComponentSelectorRender`) utilizing `useStateMachine` to interact with and display global state.

```TypeScript
import { createStore, useStateMachine } from 'little-state-machine';

createStore({
  yourDetail: { name: '' }
});

function updateName(state, payload) {
  return {
    ...state,
    yourDetail: {
      ...state.yourDetail,
      ...payload
    }
  };
}

function selector(state) {
  return state.yourDetails.name.length > 10;
}

function YourComponent() {
  const { actions, state } = useStateMachine({ actions: { updateName } });

  return (
    <buttton onClick={() => actions.updateName({ name: 'bill' })}>
      {state.yourDetail.name}
    </buttton>
  );
}

function YourComponentSelectorRender() {
  const { state } = useStateMachine({ selector });
  return <p>{state.yourDetail.name]</p>;
}

const App = () => (
  <>
    <YourComponent />
    <YourComponentSelectorRender />
  </>
);
```

--------------------------------

### Installing Little State Machine via npm

Source: https://github.com/beekai-oss/little-state-machine/blob/master/README.md

This command installs the `little-state-machine` package using npm, making it available for use in your project. It's the standard way to add the library as a dependency.

```Shell
$ npm install little-state-machine
```

--------------------------------

### Initializing Global Store with createStore (TypeScript)

Source: https://github.com/beekai-oss/little-state-machine/blob/master/README.md

This snippet demonstrates how to initialize the global state store using `createStore`. It defines the initial state structure and allows for optional configuration such as naming the store, adding middleware functions, specifying storage type (session or local), and controlling state persistence behavior.

```TypeScript
function log(store) {
  console.log(store);
  return store;
}

createStore(
  {
    yourDetail: { firstName: '', lastName: '' } // it's an object of your state
  },
  {
     name?: string; // rename the store
     middleWares?: [ log ]; // function to invoke each action
     storageType?: Storage; // session/local storage (default to session)
     persist?: 'action' // onAction is default if not provided
     // when 'none' is used then state is not persisted
     // when 'action' is used then state is saved to the storage after store action is completed
     // when 'beforeUnload' is used then state is saved to storage before page unloa
  }
);
```

--------------------------------

### Migrating to V5: Removing StateMachineProvider (Diff)

Source: https://github.com/beekai-oss/little-state-machine/blob/master/README.md

This diff snippet illustrates a key change in version 5 of `little-state-machine`, where the `StateMachineProvider` component is no longer required. This simplifies the application's root component structure, making the API more direct.

```Diff
const App = () => (
- <StateMachineProvider>
    <YourComponent />
- <StateMachineProvider>
);
```

--------------------------------

### Using useStateMachine Hook (TypeScript)

Source: https://github.com/beekai-oss/little-state-machine/blob/master/README.md

This snippet illustrates the signature of the `useStateMachine` hook. It returns `actions`, the current `state`, and a `getState` function. It accepts optional `actions` to update the global state and a `selector` function to optimize re-renders based on specific state parts.

```TypeScript
const { actions, state, getState } = useStateMachine<T>({
  actions?: Record<string, Function>, // Optional action to update global state
  selector?: Function // Optional selector to isolate re-render based on selected state
});
```

--------------------------------

### Declaring Global State Type for Type Safety (TypeScript)

Source: https://github.com/beekai-oss/little-state-machine/blob/master/README.md

This snippet shows how to declare the `GlobalState` interface within a `global.d.ts` file. This extends the `little-state-machine` module, providing type safety for your application's global state structure, ensuring correct property access and type checking.

```TypeScript
import 'little-state-machine';

declare module 'little-state-machine' {
  interface GlobalState {
    yourDetail: {
      name: string;
    };
  }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.