React FlowKit

!npm version
!npm downloads
!bundle size
!license
!GitHub stars
!GitHub forks
!TypeScript

A lightweight React library that provides convenient components for declarative flow control in React applications. React FlowKit transforms how you handle conditional rendering, iterations, and flow control with a clean, component-based approach.

Why Choose React FlowKit?

- 🌲 Tree Shakable - Only include what you actually use thanks to full tree-shaking support
- 🔍 TypeScript Support - Complete type definitions out of the box
- 📦 Tiny Size - Small bundle footprint for optimal performance
- 🚀 Enhanced Developer Experience - Cleaner, more readable flow control

Features

- IfElse - Declarative conditional rendering
- SwitchCase - Component-based switch statements
- ForEach - Simplified iteration over arrays
- StringCase - Transform text to different case formats

Installation

``bash
npm install react-flowkit


or

`jsx
import { IfElse, If, Else } from 'react-flowkit';

// Method 1: Using children

Welcome, User!
Please log in


// Method 2: Using props
condition={isLoggedIn}
if={

// Method 3: Only If
Welcome, User!
`

$3

`jsx
import { SwitchCase, Case, Default } from 'react-flowkit';


Loading...
An error occurred!
Data loaded successfully!
Unknown status


// Alternative approach using default prop
value={status}
default={

`jsx
import { ForEach } from 'react-flowkit';


{(user, index) => (


`jsx
import { StringCase } from 'react-flowkit';

// Transform to different cases
hello world // "HELLO WORLD"
HELLO WORLD // "hello world"
hello world // "Hello world"
hello world // "Hello World"
Hello World // "helloWorld"
hello world // "HelloWorld"
Hello World // "hello-world"
Hello World // "hello_world"

// Using custom delimiter
custom-delimiter-string // "customDelimiterString"
custom_delimiter_string // "CustomDelimiterString"
custom.delimiter.string // "Custom Delimiter String"
custom delimiter string // "custom_delimiter_string"
`

Comparison with Traditional Approaches

| Feature | Traditional React | React FlowKit |
|---------|------------------|--------------|
| Conditional Rendering | {condition && } or ternary operator | components |
| Switch Statements | IIFE with switch-case | component |
| List Rendering | Array.map() | component |
| Text Case Transformation | Utility functions | component |
| Code Readability | Mixed JSX and JS logic | Clear, declarative components |

Benefits Summary

- ✅ Declarative - Component-based flow control instead of JavaScript expressions
- ✅ Maintainable - Easier to read and maintain as applications grow
- ✅ Lightweight - Minimal bundle impact due to tree-shaking support
- ✅ Type-Safe - Full TypeScript support for improved developer experience
- ✅ Minimal Dependencies - Just one dependency (and only if you use GitBranchVersion)
- ✅ Modern - Built for current React paradigms
- ✅ Versatile - Works with all React projects

Development

Clone the repository:

`bash
git clone https://github.com/Sawannrl123/react-flowkit.git
cd react-flowkit
`

Install dependencies:

`bash
npm install


or

`bash
pnpm dev
`

Build the library:

`bash
pnpm build
`

Run tests:

`bash
pnpm test
`

Run Storybook:

`bash
pnpm storybook
`

Build Storybook:

`bash
pnpm build:storybook
``

License

MIT

Contributors

- Sawan Kumar - Creator and maintainer
- Varad Prabhu - Contributor
- LinkedIn
- Portfolio

Special thanks to Varad for his valuable contributions to this project!