https://github.com/chlbri/context-machine

https://github.com/chlbri/context-machine

Last synced: 26 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/chlbri/context-machine
• Owner: chlbri
• License: mit
• Created: 2021-08-15T16:43:13.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-09-12T13:35:10.000Z (over 3 years ago)
• Last Synced: 2024-05-31T15:30:36.863Z (7 months ago)
• Language: TypeScript
• Size: 370 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Context-Machine







The most wanted thing.

Use a machine across the entire app.




##### First,

### **createContextMachine (_config_: MachineConfig, _options_ :MachineOptions)** : _React.Context_ 




It will create the context and the machine as meta (_(out as any).machine = machine_)

It returns an _XState_ **Interpreter**

For the _service_ one, we omit the send, sender and state.

**N.B :** At this state, the context is not modifiable. The **_Interpreter_** value resulted cannot be modifiable across many components.







##### Optionaly,

### **usePrepareContextMachine (machine:StateMachine, options?: MachineOptions )**: [state, send, service]




This function is used to initialize the Context with a mutable service. It’s for more reffining.







##### Secondly,

## **MachineProvider(Context: MachineContext, children:ReactNode, options:MachineOptions)** : _JSX.Element_




The Provider.

You just have to write your children. It calls the _usePrepareContextMachine_ internally.




_.../Wrapper.tsx_

```tsx

const MyProvider: FC = ({ children }) => (

  {children}

);

```




_.../pages/\_app.tsx_

```tsx

import type { AppProps } from "next/app";

import Head from "next/head";

import ProviderMachine from "../components/providers";

import "../styles/globals.css";

function MyApp({ Component, pageProps }: AppProps) {

  return (

    

      

        The best web App is Hellow World !!

      

      

    

  );

}

export default MyApp;

```







###### Thirdly,




## **useState(Context: MachineContext)** : XState _State_




As the name says, It returns the current state of the machine accross all components.







## **useSend(Context: MachineContext)** : XState _send_




As the name says, It returns the current state of the machine accross all components.







## **useService(Context: MachineContext)** : XState-custom _service_




As the name says, It returns the service of the machine accross all components.

**N.B :** We omit the _send_, _sender_ and _state_ from this service because they aren’t mutables. This is usually used for listening to events and context.







## **useContext(Context: MachineContext)** : _Entire Mutable Machine_




Use all of these three hooks.

The value is :

```tsx

{

  state: State,

  send: Sender,

  service: Custom_Service,

};

```







## **useSelector(Context: MachineContext, selector: _StateSelector_)** : _Select "wyw" inside the state_




Only listen to the selected value

The value is :

```tsx

const select: useSelector(LightContext, state => state.context.elapsed);

```










# And voilà!