withState

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);

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>
    </>
  );
}

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
);