A React library for building flow-based applications.
npm install 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.
- 🌲 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
- IfElse - Declarative conditional rendering
- SwitchCase - Component-based switch statements
- ForEach - Simplified iteration over arrays
- StringCase - Transform text to different case formats
``bash`
npm install react-flowkitor
yarn add react-flowkitor
pnpm install react-flowkit
`jsx
import { IfElse, If, Else } from 'react-flowkit';
// Method 1: Using children
// Method 2: Using props
if={
// Method 3: Only If
`
`jsx
import { SwitchCase, Case, Default } from 'react-flowkit';
// Alternative approach using default prop
default={
$3
`jsx
import { ForEach } from 'react-flowkit';
{(user, index) => (
{index + 1}. {user.name}
)}
`$3
`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
yarn
or
pnpm install
`Run development mode:
`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
``MIT
- Sawan Kumar - Creator and maintainer
- Varad Prabhu - Contributor
- LinkedIn
- Portfolio
Special thanks to Varad for his valuable contributions to this project!