Reaktr

A powerful CLI tool for quickly scaffolding React component structures and services for web applications.

Features

• ✨ Instantly generates common React components
• 🧩 Creates consistent UI elements with modern styling
• 🔄 Sets up API service layer with CRUD operations
• 🚀 Optimized for rapid prototyping and development
• 📄 Config-driven component generation

Installation

npm install -g reaktr

Usage

Reaktr provides two main commands:

Initialize Configuration

Start by creating a configuration file in your project:

reaktr init

This creates a reaktr.config.json file with default settings that you can customize.

Generate Components

Once you've configured your settings, generate components:

reaktr gen

This will create the following structure in your src directory:

src/
├── components/
│   ├── HeaderBar.jsx
│   ├── SearchBar.jsx
│   ├── ListView.jsx
│   ├── Pagination.jsx
│   └── ModalForm.jsx
└── services/
    └── api.js

Generated Components

• HeaderBar: A flexible header with title, subtitle and action buttons
• SearchBar: Search input with clearing functionality
• ListView: Tabular data display with action buttons
• Pagination: Simple numeric pagination control
• ModalForm: Modal dialog with form fields for CRUD operations
• API Service: Common API endpoints for data operations

Configuration

The reaktr.config.json file controls what components are generated and how they're configured:

{
  "projectName": "My App",
  "pages": [
    {
      "name": "Samples",
      "route": "/samples",
      "header": {
        "title": "Samples",
        "subtitle": "Manage Sample Records"
      },
      "list": {
        "style": "table",
        "columns": [
          { "label": "Program", "field": "sampleProgram.name" },
          { "label": "Title", "field": "title", "maxLength": 20 }
        ]
      },
      "form": {
        "submitUrl": "/sample/create",
        "method": "POST",
        "fields": [
          {
            "name": "Title",
            "type": "text",
            "label": "Title"
          }
        ]
      }
    }
  ],
  "css": {
    "library": "shadcn"
  }
}

Command Options

# Show help
reaktr --help

# Initialize with a specific CSS framework
reaktr init --css tailwind

# Generate only specific components
reaktr gen --components header,form,list

# Specify output directory
reaktr gen --out components/ui

Requirements

• Node.js 14.x or higher
• React 17.x or higher
• Compatible with CSS frameworks like Tailwind CSS

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT