withState

You can connect your component to the global state by using the withState hook. The withState hook is used to wrap your component and provide it with access to the global state. It receives two parameters:

The first parameter is your React component.
The second parameter is optional observer instance and is used when you want to connect your component to a custom observer.

Here's an example of how to use the withState hook:


import { withState } from 'rosma';

function CountNumbers({ number = 0, setNumber }) {
  return <button onClick={() => setNumber(number + 1)}>{number}</button>;
}

export default withState(CountNumbers);


import { withState, WithSetters } from 'rosma';

type State = {
  number: number;
};

function CountNumbers({ number = 0, setNumber }: WithSetters<State>) {
  return <button onClick={() => setNumber(number + 1)}>{number}</button>;
}

export default withState(CountNumbers);

In this example, the CountNumbers component is wrapped with the withState hook. The number and setNumber props are automatically provided to the component by the hook.

If you need to pass other parameters than the state to your component, you can store the returns of withState in a variable and use it as a React component and pass the desired values you need as a prop to that component.


import { useState } from 'react';
import { withState } from 'rosma';

const ComponentA = withState(({ number = 0, setNumber, strTime }) => (
  <div style={{ backgroundColor: '#efefef', padding: '5px' }}>
    <p style={{ fontWeight: 'bold' }}>Component A</p>
    <button onClick={() => setNumber(number + 1)}>Count is: {number}</button>
    <p>Time is: {strTime}</p>
  </div>
));

export function ComponentB() {
  const [strTime, setStrTime] = useState('');

  return (
    <>
      <ComponentA strTime={strTime} />
      <div style={{ backgroundColor: '#e2e2e2', padding: '5px' }}>
        <p style={{ fontWeight: 'bold' }}>Component B</p>
        <button onClick={() => setStrTime(new Date().toLocaleTimeString())}>
          click to update time
        </button>
      </div>
    </>
  );
}


import { useState } from 'react';
import { withState } from 'rosma';

type State = {
  number: number;
};

const ComponentA = withState<State, { strTime: string }>(
  ({ number = 0, setNumber, strTime }) => (
    <div style={{ backgroundColor: '#efefef', padding: '5px' }}>
      <p style={{ fontWeight: 'bold' }}>Component A</p>
      <button onClick={() => setNumber(number + 1)}>Count is: {number}</button>
      <p>Time is: {strTime}</p>
    </div>
  )
);

export function ComponentB() {
  const [strTime, setStrTime] = useState<string>('');

  return (
    <>
      <ComponentA strTime={strTime} />
      <div style={{ backgroundColor: '#e2e2e2', padding: '5px' }}>
        <p style={{ fontWeight: 'bold' }}>Component B</p>
        <button onClick={() => setStrTime(new Date().toLocaleTimeString())}>
          click to update time
        </button>
      </div>
    </>
  );
}

Component A

Time is:

Component B

In this example, the value of ComponentA is taken from the returns of the withState hook, as you can see this component accepts the extra prop strTime. Also, ComponentB internally renders ComponentA by passing the strTime prop to it.

Custom observer and withState

You can pass your custom observer as the second parameter to withState.

Here's an example:


import { withState, Observer } from 'rosma';

const observer = new Observer({ number: 10 });

export const CountNumber = withState(
  ({ number, setNumber }) => (
    <button onClick={() => setNumber(number + 1)}>Number is :{number}</button>
  ),
  observer
);


import { withState, Observer } from 'rosma';

type State = {
  number: number;
};

const observer = new Observer<State>({ number: 10 });

export const CountNumber = withState<State>(
  ({ number, setNumber }) => (
    <button onClick={() => setNumber(number + 1)}>Number is :{number}</button>
  ),
  observer
);

In this example, a anonymous function as React component is connected to a custom observer using the withState hook, which is passed to the withState hook in the second parameter, and its output is stored and exported in a variable called CountNumber.

Keywords: withState, global state, hook, useState, React, custom observer, component, parameters, prop, variable, time, Observer, CountNumber, setNumber

Previous: Subscribe for state changes