React Utils

This small package includes a series of utility React components, built by the team at 7code.

Like what you see? Visit our website here

Installation

yarn add sevencode-react-utils

Components

Here's a list of the currently available components:

<RenderIf/>

This component's meant to be used for conditional rendering.

Example usage:

import { RenderIf } from 'sevencode-react-utils'

export const SomeComponent = () => {
    const condition = true 
    const getCondition = () => true
    
    return <>
        <RenderIf condition={condition}>
            This gets rendered
        </RenderIf>
        <RenderIf condition={getCondition}>
            This also gets rendered
        </RenderIf>
        <RenderIf condition={!condition}>
            This does not
        </RenderIf>
    </>
}

<Switch/>

This component's meant to mimic the behaviour of a switch expression.

Example usage:

import { Switch } from 'sevencode-react-utils'

enum Variants {
    First,
    Second,
    Third
}

const getVariant = (): Variant => {
    // imagine some logic here
}

export const SomeComponent = () => {
    const variant = getVariant()

    return <Switch current={variant}>
        <Switch.Case value={Variants.First}>
            Rendering first variant
        </Switch.Case>
        <Switch.Case value={Variants.Second}>
            Rendering second variant
        </Switch.Case>
        <Switch.Case value={Variants.Third}>
            Rendering third variant
        </Switch.Case>
        <p>
            This won't be rendered as it's not a Case component
        </p>
    </Switch>
}