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.

Showing:

Popularity

Downloads/wk

16

GitHub Stars

29

Maintenance

Last Commit

3yrs ago

Contributors

3

Package

Dependencies

0

Size (min+gzip)

1.5KB

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

react-stoon

npm version license dependency status Join the chat at https://gitter.im/MoroccanOSS/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} />}
      />
    );
}

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial