Counter App

The Counter component is a simple example that demonstrates how to use Rosma to manage the state in your React application. In this example, we use the useObserver hook to create a global state variable called count, which is initially set to 0, and a setter method called setCount.

import { useObserver } from 'rosma';

export default function Counter() {
  const { count, setCount } = useObserver(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      <span>the count is: </span>
      {count}
    </button>
  );
}

import { useObserver } from 'rosma';

type State = {
  count: number;
};

export default function Counter() {
  const { count, setCount } = useObserver<State>(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      <span>the count is: </span>
      {count}
    </button>
  );
}

You can also use the same with whitState HOC :

import { withState } from 'rosma';

function Counter({ count = 0, setCount }) {
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

export default withState(Counter);

import { withState, WithSetters } from 'rosma';

function Counter({ count = 0, setCount }: WithSetters<{ count: number }>) {
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

export default withState(Counter);

Demo

In the example above, we're using the useObserver hook to create a global state variable called count and its corresponding setter method called setCount. The initial value of the count is set to 0.

To update the count variable, we simply call its corresponding setter method setCount with the new value. In this case, we're incrementing the count value by 1 each time the button is clicked.

No Order for Variables

It's worth noting that the order in which the variables are destructured from the useObserver hook doesn't matter. Rosma will automatically assign the correct values to each variable based on their names.

import { useObserver } from 'rosma';

export default function Counter() {
  const { setCount, count } = useObserver(0);

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

import { useObserver } from 'rosma';

type State = {
  count: number;
};

export default function Counter() {
  const { setCount, count } = useObserver<State>(0);

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

In the example above, we've destructured the setCount and count variables in the opposite order from the previous example, and Rosma is still able to assign the correct values to each variable.

Case Insensitive Variables

Additionally, please note that all variables in the state are stored in lowercase, but the names retrieved from the state values are not case-sensitive. This means you can use any combination of uppercase and lowercase letters when retrieving your variables using useObserver.

import { useObserver } from 'rosma';

export default function Counter() {
  const { CouNt, setcOunT } = useObserver(0);

  return <button onClick={() => setcOunT(CouNt + 1)}>{CouNt}</button>;
}

import { useObserver } from 'rosma';

export default function Counter() {
  const { CouNt, setcOunT } = useObserver(0);

  return <button onClick={() => setcOunT(CouNt + 1)}>{CouNt}</button>;
}

In the example above, we've taken the count variable as CouNt and its corresponding setter method as setcOunT, both with mixed case letters. Rosma is still able to assign the correct values to each variable based on their names.

By using the useObserver hook along with its corresponding setter method naming convention, Rosma makes it easy to manage global state variables in your React application. Give it a try and see how it can simplify your state management process.

Keywords: React, state management, Rosma, useObserver, global state, variable names, destructuring, setter methods, incrementing, case-insensitive, naming convention