React-Flow-Control

React component library for declarative JSX control flow.

react-flow-control aims to replace patterns such as

1    data && <Component />

or

1    isBoolean ? <ComponentOne /> : <ComponentTwo />

which when nested and the control flow logic gets more complex can become a nightmare to reason with when reading especially with larger codeblocks within the ternary returns. react-flow-control instead places this logic within renderless JSX elements whose sole perpose is to render its children based on various conditions.

the most basis is the Show component.

1
2// This
3
4function myComponent(){
5    const {data, loading, error} = useSomeHook()
6
7    return (
8       {
9           !loading ? 
10                !error ?
11                    (<ThingIActuallyWantToRender /> ):
12                    (<ErrorComponent />)
13                : ( <LoadingSpinner />)
14       }
15    )
16}
17
18
19// becomes
20
21
22
23function myComponent(){
24    const {data, loading, error} = useSomeHook()
25
26    return (
27        <Show when={!loading} fallback={()=> <LoadingSpinner/>}>
28            <Show when={!error} fallback={()=><ErrorComponent/>}>
29                <ThingIActuallyWantToRender />
30            </Show>
31        </Show>
32    )
33}
34
35

react-flow-control also provides utilities for loops, and switches.

Contributing

If theres a control flow you think could be useful in this pattern please make and issue or pr. All contributions are welcome, in the form of bug fixes, docs, tests aswell as features. Below are some features of this repo for those running this package locally.