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 aspiring to be your lodash for React.

Install

npm install react-stoon --save

Show

renders $ only if if is truthy.

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

Hide

hides $ only if if is truthy.

const MyComponent = ({ shouldNotShowText }) => {
    return (
        <Hide if={shouldNotShowText}>
            <Text>You can see this text, only if shouldNotShowText is false</Text>
        </Hide>
    );
}

Repeat

foearch

creates a clone of props.children for each element of props.foreach while passing the current object as a prop with the alias defined by as.

const Book = ({children, book}) => {
    return (
        <div>
            <div>Book name {book}</div>
        </div>
    )
};
const books = ['Clean Code', 'Code Complete', 'The pragmatic programmer'];
const MyComponent = () => {
    return (
        <Repeat foreach={books} as='book'>
            <Book />
        </Repeat>
    );
}

times

creates times copies of props.children while passing the index as a prop with the alias defined by as.

const MyDiv = ({children, index}) => {
    return (
        <div>
            <div>Element Number {index}</div>
            <div>{children}</div>
        </div>
    )
};
const MyComponent = () => {
    return (
        <Repeat times={5} as='index'>
            <MyDiv />
        </Repeat>
    );
}

Switch

renders Switch.Case if value matches target, renders Switch.Default if none matched.

const MyComponent = () => {
    return (
        <Switch target={message}>
            <Switch.Case value='hey'>
                It's hey!
            </Switch.Case>
            <Switch.Case value='hello'>
                It's hello!
            </Switch.Case>
            <Switch.Default>
                It's neither hey nor hello !
            </Switch.Default>
        </Switch>
    );
}

LifeCycleAware

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

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

Promiser

const MyComponent = () => {
    return (
      <Promiser
        preload={true}
        preloadComponent={<Preloader />}
        promise={getUser("younesshakky")}
        catch={err => <ErrorComponent message={err.message}/>}
        render={user => <UserInfo user={user} />}
      />
    );
}