React UI helper. Generate interactive form based on given schema
npm install formthinkerA powerful React component library for generating interactive forms based on schema definitions. FormThinkerJS provides a flexible and customizable way to create dynamic forms with built-in Tailwind CSS styling.
- 🚀 Schema-driven: Generate forms from JSON schema definitions
- 🎨 Tailwind CSS: Beautiful, responsive design out of the box
- 🔧 Customizable: Extensive customization options
- 📱 Responsive: Mobile-first design approach
- 🎯 JavaScript: Pure JavaScript implementation
- âš¡ Performance: Optimized with React lazy loading
- 🧩 Modular: Use individual components or the complete form builder
``bash`
npm install formthinker
`jsx
import React, { useState } from 'react';
import { FormThinker } from 'formthinker';
function App() {
const [formData, setFormData] = useState({});
const schema = {
type: 'object',
properties: {
name: {
type: 'string',
title: 'Full Name',
required: true
},
email: {
type: 'string',
title: 'Email Address',
format: 'email',
required: true
},
age: {
type: 'number',
title: 'Age',
minimum: 18,
maximum: 100
}
}
};
return (
export default App;
`
- FormThinker: The main form component that renders forms based on schema
- FormWidget: Internal widget component for form rendering
- FormHeader: Header component for forms
- FormHeaderPill: Pill-style header component
- FormPlayGround: Interactive playground for form development
- Input: Text input field
- Checkbox: Single checkbox field
- MultipleCheckbox: Multiple checkbox selection
- Range: Range slider input
- Options: Radio button options
- SelectBox: Dropdown selection
- ColorPalette: Color picker component
- ArrayInput: Array input field
- RichTextEditor: Rich text editing component
- ArrayOfObject: Array of object input
FormThinkerJS uses a JSON schema format to define forms:
`javascript`
const schema = {
type: 'object',
properties: {
fieldName: {
type: 'string', // 'string', 'number', 'boolean', 'array', 'object'
title: 'Field Label',
description: 'Field description',
required: true,
// Additional field-specific properties
}
}
};
FormThinkerJS uses Tailwind CSS for styling. The components are designed to work seamlessly with Tailwind's utility classes. You can customize the appearance by:
1. Using Tailwind classes in your parent components
2. Overriding the default styles with custom CSS
3. Modifying the Tailwind configuration
FormThinkerJS is built with pure JavaScript and works seamlessly with any React project:
`javascript
import { FormThinker } from 'formthinker';
const MyForm = () => {
const [data, setData] = useState({});
return (
data={data}
setData={setData}
/>
);
};
`
To contribute to FormThinkerJS:
`bashClone the repository
git clone https://github.com/akrit_singha/formthinker.git
ISC License - see LICENSE file for details.
Contributions are welcome! Please feel free to submit a Pull Request.
If you encounter any issues or have questions, please file an issue on GitHub.