tchisama-react-logic v1.0.6

Certainly! Here's the updated README with code results added to each component:

tchisama-react-logic

Overview

tchisama-react-logic is a library of non-UI components designed to enhance the React coding experience by providing useful utilities for handling conditional rendering, looping through data, working with dates, and more. This README provides an overview of the available components and how to use them.

Installation

You can install tchisama-react-logic via npm or yarn:

npm install tchisama-react-logic
# or
yarn add tchisama-react-logic

Components

1. Switch, Case, Default

The Switch component allows you to conditionally render content based on the provided value. Use Case components to define different cases and a Default component for a fallback.

<Switch value="case2">
  <Case value="case1">Render content for case 1</Case>
  <Case value="case2">Render content for case 2</Case>
  <Case value="case3">Render content for case 3</Case>
  <Default>Render something else</Default>
</Switch>

Result:

Render content for case 2

2. Loop

The Loop component simplifies iterating through an array of items and rendering them. It supports pagination, click handling, and an empty message.

<Loop
  className=''
  items={data}
  renderItem={(item) => <div>{item.name}</div>}
  onItemClick={(item) => {
    // Handle item click here
    console.log(`Item clicked: ${item.name}`);
  }}
  emptyMessage="No items found"
  keyProp='id'
  pageSize={3}
  pagination
/>

Result:

// Rendered list of items with pagination, click handling, and empty message

3. DateComponent

The DateComponent component allows you to format and display dates easily.

<DateComponent
  className='bg-blue-600 w-fit p-2 rounded-md' 
  value={new Date()} 
  get="date" 
/>

Result:

// Rendered formatted date

4. If, True, False

The If component enables conditional rendering based on a given condition. Use True and False components to specify what to render in each case.

<If con={1 > 2}>
  <True>if true</True>
  <False>if false</False>
</If>

Result:

if false

5. Random, RandomItem

The Random component randomly selects and renders one of its children.

<Random>
  <RandomItem>a</RandomItem>
  <RandomItem>b</RandomItem>
  <RandomItem>c</RandomItem>
</Random>

Result:

// Rendered random child (e.g., 'a', 'b', or 'c')

Usage

1. Install tchisama-react-logic using npm or yarn as shown in the Installation section.
2. Import the components you need in your React components:

import { Switch, Case, Default, Loop, DateComponent, If, True, False, Random, RandomItem } from 'tchisama-react-logic';

3. Use the imported components in your JSX as demonstrated in the component descriptions above.

License

This package is open-source and available under the MIT License.

Now the README includes code results for each component to provide a clearer understanding of how they work.