Counter

Код DemoCounterWrapper
type childrenPropTypes = {
    onChange: (value: number) => void;
    initialValue: number;
    value?: number;
}

interface IDemoCounterWrapperProps {
    children: (prop: childrenPropTypes) => JSX.Element;
    initialValue: number;
    isControlled?: boolean;
}

export const DemoCounterWrapper: React.FC<IDemoCounterWrapperProps> = ({
    isControlled,
    initialValue = 0,
    children,
}) => {
    const [value, setValue] = React.useState(initialValue);

    const childrenProps: childrenPropTypes = {
        onChange: setValue,
        initialValue,
    };

    if (isControlled) {
        childrenProps.value = value;
    }

    return (
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-around', textAlign: 'center', flexDirection: 'column' }}>
            <p style={{ marginTop: 0, marginBottom: '15px' }}>Value: {value}</p>
            {children(childrenProps)}
        </div>
    );
};

Состояния счетчика

Выбрано минимальное значение

<DemoCounterWrapper initialValue={3}>
  {({ onChange, initialValue }) =>
      <Counter
          initialValue={initialValue}
          onChange={onChange}
          min={3}
          max={33}
      />
  }
</DemoCounterWrapper>

Выбрано среднее значение

<DemoCounterWrapper initialValue={18}>
  {({ onChange, initialValue }) =>
      <Counter
          initialValue={initialValue}
          onChange={onChange}
          min={3}
          max={33}
      />
  }
</DemoCounterWrapper>

Выбрано максимальное значение

<DemoCounterWrapper initialValue={33}>
  {({ onChange, initialValue }) =>
      <Counter
          initialValue={initialValue}
          onChange={onChange}
          min={3}
          max={33}
      />
  }
</DemoCounterWrapper>

Контролируемое состояние

Компонент контроллируется родителем.

<DemoCounterWrapper isControlled initialValue={5}>
  {({ onChange, value }) => (
      <Counter isControlled value={value} onChange={onChange} /> 
  )}
</DemoCounterWrapper>

Выключенное состояние

<DemoCounterWrapper>
  {({ onChange }) => <Counter onChange={onChange} disabled /> }
</DemoCounterWrapper>