DevAnouar/react-stoon

react-stoon is a handy toolbox of reusable Components that allow you to reduce boilerplate by writing less js inside of your React Components.

react-stoon

react-stoon is a handy toolbox of reusable Components that allow you to reduce boilerplate by writing less js inside of your React Components.

react-stoon is a fast growing toolbox inspiring to be your lodash for React.

Show

renders $ only if if is truthy.

const MyComponent = ({ shouldShowText }) => {
    return (
        <Show
        $={Text}
        if={shouldShowText}
        >
            You can see this text, only if props.if is true
        </Show>
    );
}

Repeat

creates times copies of $.

const MyComponent = () => {
    return (
        <Repeat
        $={Text}
        times={5}
        >
            This Text will be repeated 5 times
        </Repeat>
    );
}

Switch

renders Switch.Case if value matches target.

const MyComponent = () => {
    return (
        <Switch
        $={Div}
        target='Hello'
        >
            <Switch.Case
            $={Text}
            value='Hey'
            >
                the target equals Hey
            </Switch.Case>
            <Switch.Case
            $={Text}
            value='Hello'
            >
                the target equals Hello
            </Switch.Case>
        </Switch>
    );
}

LifeCycleAware

allows you to use React's lifecycle Hooks without turning your component to a class.

const MyComponent = () => {
    return (
        <LifeCycleAware
        $={Text}
        willMount={() => console.log('Will Mount!')}
        didMount={() => console.log('Did Mount!')}
        >
            Hello, I am a LifecycleAwareComponent!
        </LifeCycleAware>
    );
}