gorny v0.0.17

Conditional Rendering Components Documentation

Welcome to the documentation for the conditional rendering components provided by the Gorny library. These components make it easier to conditionally display content based on specific conditions. The main component is the Choose component, which offers powerful control over rendering different content blocks.

Table of Contents

• Choose Component
  • Import
  • Props
  • Usage
    • Example with Multiple Conditions
    • Example with Single Condition
• Choose.When Component
  • Import
  • Props
  • Usage
• Choose.Otherwise Component
  • Import
  • Props
  • Usage

Choose Component

The Choose component enables you to conditionally render different content blocks based on specific conditions. It is especially useful when you need to display content based on multiple possible conditions.

Choose Import

import { Choose } from 'gorny';

Choose Props

• children (Required): A React node or an array of React nodes representing the content blocks to choose from.
• multiple (Optional): Set to true to allow rendering of multiple content blocks. Default value is false.

Choose Usage

Example with Multiple Conditions

<Choose multiple>
	<Choose.When condition={condition1}>
		{/* Content for condition 1 */}
	</Choose.When>
	<Choose.When condition={condition2}>
		{/* Content for condition 2 */}
	</Choose.When>
	<Choose.Otherwise>{/* Content if no conditions are met */}</Choose.Otherwise>
</Choose>

Example with Single Condition

<Choose>
	<Choose.When condition={condition1}>
		{/* Content for condition 1 */}
	</Choose.When>
	<Choose.When condition={condition2}>
		{/* Content for condition 2 */}
	</Choose.When>
	<Choose.Otherwise>{/* Content if no conditions are met */}</Choose.Otherwise>
</Choose>

Choose.When Component

The Choose.When component is used within the Choose component to define a specific condition and the corresponding content to render if the condition is met.

Choose.When Import

import { Choose } from 'gorny';

Choose.When Props

• condition (Required): The condition that determines whether to render the associated content.
• children (Required): A React node or an array of React nodes representing the content to be rendered when the condition is met.

Choose.When Usage

<Choose>
	<Choose.When condition={someCondition}>
		{/* Content to render if the condition is met */}
	</Choose.When>
</Choose>

Choose.Otherwise Component

The Choose.Otherwise component is used within the Choose component to define content that should be rendered when no other conditions are met.

Choose.Otherwise Import

import { Choose } from 'gorny';

Choose.Otherwise Props

• children (Required): A React node or an array of React nodes representing the content to be rendered when no conditions are met.

Choose.Otherwise Usage

<Choose>
	{/* ...  */}
	<Choose.Otherwise>
		{/* Content to render if no conditions are met*/}
	</Choose.Otherwise>
</Choose>