phl3bas/react-flow-control

React component library for declarative JSX control flow

React-Flow-Control

React component library for declarative JSX control flow.

react-flow-control aims to replace patterns such as

    data && <Component />

or

    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.

// This

function myComponent(){
    const {data, loading, error} = useSomeHook()

    return (
       {
           !loading ? 
                !error ?
                    (<ThingIActuallyWantToRender /> ):
                    (<ErrorComponent />)
                : ( <LoadingSpinner />)
       }
    )
}


// becomes



function myComponent(){
    const {data, loading, error} = useSomeHook()

    return (
        <Show when={!loading} fallback={()=> <LoadingSpinner/>}>
            <Show when={!error} fallback={()=><ErrorComponent/>}>
                <ThingIActuallyWantToRender />
            </Show>
        </Show>
    )
}

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

install

    npm install react-flow-control
    yarn add react-flow-control

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.

react-flow-control's Issues

For - keyedBy prop

The current implementation for For's auto-key-ing is naive and frankly stupid as it brings in possible issues with duplicate keys.

a possible solution is to default keying the items in the array by they index, and also including a keyedBy prop that will be a string, referencing a property name in the item which to use as a key

example api

function App(){

  const arr = [
    {
      _id: 'id-string-01',
      name: 'Bob'
    },
    {
      _id: 'id-string-02',
      name: 'Frank'
    },   
    {
      _id: 'id-string-03',
      name: 'James'
    }

  ]

  return (
    <For each={arr} keyedBy={'_id'} >
      {(value)=>(<div>{value.name}</div>)}
    </For>
  )
}

no keyedBy Prop should default to keying the item by its index, not optimal for all cases, but is want is often used.

For - loop over object entires

A common pattern is to loop over object keys or entries, we could probably do this with an of prop that takes an Record<string, T> and loops of Object.keys and/or and entries prop that loops of Object.entries

Improve docs

The docs in the readme could be improved with details about switch and for will also need to create a single page template for a doc site though this will be very small, readme will be enough for now