React: Conditional Components Renderer

This library brings React components to render or not children by conditional situations.

Summary

• React: Conditional Components Renderer
  • Summary
  • If component
    • Redirect Props
  • Switch and Case component
    • Case render Props
    • Switch render Props
  • Choice component
    • InCaseOf render Props
    • Otherwise render Props
    • Choice render Props
  • Thank you

If component

If you need render a component upon if/else conditional, you could use <If />.

Redirect Props

| Property | Required | Type | Description | | ------------ | -------- | --------------- | -------------------------------------------------- | | test | yes | boolean | Conditional boolean test. | | orElse | no | React Component | Component that will be rendered if the test fails. | | children | yes | React Component | A child component to render. |

Example:

const Compoment = () => {
  return (
    <If test={1 === 1} orElse={<div>Show other component</div>}
      <div>Show component!</div>
    </If>
  );
}

Switch and Case component

If you want to choose render a component by some conditional cases, you could use <Switch /> <Case />.

Case render Props

This component will be used to verify some case match and render the child.

| Property | Required | Type | Description | | -------------- | -------- | ---------------- | ---------------------------- | | identifier | yes | String or Number | Identifier to test matches. | | children | yes | React Component | A child component to render. |

Switch render Props

This component will be group all of cases and to test matches.

| Property | Required | Type | Description | | ------------ | -------- | -------------------------- | ------------------------------------------------- | | case | yes | String or Number or Object | Conditional to test matches. | | default | yes | React Component | Component that will be rendered if no case match. | | children | yes | Array of Case component | List of Case components to test. |

Example:

const Compoment = () => {
  return (
    <Switch case="a" default={<div>Show Default component</div>}>
      <Case identifier="a"><div>Show A component</div></Case>
      <Case identifier="b"><div>Show B component</div></Case>
    </Switch>
  );
}

Choice component

If you want to choose render a component by some conditional tests, you could use <Choice /> <InCaseOf /> <Otherwise />.

InCaseOf render Props

This component will be used to verify some match and render the child.

| Property | Required | Type | Description | | ------------ | -------- | --------------- | ---------------------------- | | test | yes | boolean | Conditional boolean test. | | children | yes | React Component | A child component to render. |

Otherwise render Props

This component will be used to show a child component if none of Case components didn't match the choice.

| Property | Required | Type | Description | | ------------ | -------- | --------------- | ---------------------------- | | children | yes | React Component | A child component to render. |

Choice render Props

This component will be group all of choices to tests and renderizations.

| Property | Required | Type | Description | | ------------ | -------- | ---------------------------------------- | --------------------------------- | | children | yes | Array of InCaseOf or Otherwise Component | List of components to test match. |

Example:

const Compoment = () => {
  const x = 1;
  return (
    <Choice>
      <InCaseOf test={x === 1}><div>Show First choice</div></InCaseOf>
      <InCaseOf test={x === 2}><div>Show Second choice</div></InCaseOf>
      <Otherwise><div>Show default choice</div></Otherwise>
    </Choice>
  );
}

Thank you

Enjoy the library and Thank you for use it!

Reginaldo Morais