@floraai/rjsf-daisyui

v6.0.0-beta.20.4

Published

3 months ago

Daisy UI components for react-jsonschema-form

0High
0Medium
0Low

tpnet3

@rjsf/daisyui

A DaisyUI theme for react-jsonschema-form.

This package integrates DaisyUI, Tailwind CSS, and RJSF to provide a modern, customizable form experience.

Screenshots

DaisyUI Form Example 1 DaisyUI Form Example 2

Features

Complete DaisyUI styling for all RJSF form elements
Responsive design with mobile-friendly layouts
Connected card styling for nested elements and arrays
Consistent visual hierarchy for complex forms
Support for all RJSF field types including:
- Text inputs with proper styling and validation states
- Select dropdowns with customizable option rendering
- Checkboxes and radio buttons with optimized layouts
- Arrays with add/remove/reorder functionality
- Objects with proper nesting and visual hierarchy
- Date/time inputs with cross-browser compatibility
Support for custom themes via DaisyUI's theme system
Accessible form components following WAI-ARIA practices

Getting Started

Prerequisites

daisyui >= 5
@fluentui/react-icons >= 2
@fluentui/react-migration-v0-v9 >= 9
@rjsf/core >= 6
@rjsf/utils >= 6
@rjsf/validator-ajv8 >= 6

Installation

npm install @rjsf/daisyui @rjsf/core @rjsf/utils @rjsf/validator-ajv8 tailwindcss daisyui

Usage

import { Form } from '@rjsf/daisyui';
import validator from '@rjsf/validator-ajv8';

function App() {
  return (
    <Form schema={schema} uiSchema={uiSchema} validator={validator} onChange={console.log} onSubmit={console.log} />
  );
}

Theme Customization

The form components use DaisyUI's theme system. You can customize the theme by adding DaisyUI theme classes to your HTML:

<html data-theme="light">
  <!-- or any other DaisyUI theme -->
</html>

For dynamic theme switching, you can change the data-theme attribute in your application code.

Tailwind Configuration

Make sure your src/index.css includes the DaisyUI plugin:

@import 'tailwindcss';
@source "../node_modules/@rjsf/daisyui";
@plugin "daisyui" {
  themes: all;
}

It's necessary to explicitely include the library as a source, as tailwindcss by default ignores everything in .gitignore

Customization

Grid Layout

The DaisyUI theme supports the standard RJSF layout grid system. You can use grid layouts by incorporating the LayoutGridField in your UI schema:

import { RJSFSchema, UiSchema } from '@rjsf/utils';
import Form from '@rjsf/daisyui';
import validator from '@rjsf/validator-ajv8';

const schema = {
  type: 'object',
  properties: {
    firstName: { type: 'string', title: 'First Name' },
    lastName: { type: 'string', title: 'Last Name' },
    email: { type: 'string', format: 'email', title: 'Email' },
    phone: { type: 'string', title: 'Phone' },
  },
};

// Use grid layout for the form
const uiSchema = {
  'ui:field': 'LayoutGridField',
  'ui:layoutGrid': {
    'ui:row': {
      children: [
        {
          'ui:row': {
            children: [
              {
                'ui:col': {
                  xs: 12,
                  sm: 6,
                  children: ['firstName'],
                },
              },
              {
                'ui:col': {
                  xs: 12,
                  sm: 6,
                  children: ['lastName'],
                },
              },
            ],
          },
        },
        {
          'ui:row': {
            children: [
              {
                'ui:col': {
                  xs: 12,
                  sm: 6,
                  children: ['email'],
                },
              },
              {
                'ui:col': {
                  xs: 12,
                  sm: 6,
                  children: ['phone'],
                },
              },
            ],
          },
        },
      ],
    },
  },
};

const MyForm = () => <Form schema={schema} uiSchema={uiSchema} validator={validator} />;

The DaisyUI theme uses a flexible grid system based on Tailwind CSS's flex utilities. This grid layout integrates with the standard RJSF layout system, providing a consistent experience across all themes.

Theme Configuration

DaisyUI itself provides a variety of themes. To use a specific theme, add the data-theme attribute to your root element:

<div data-theme='dark'>
  <Form schema={schema} validator={validator} />
</div>

You can also dynamically change themes in your application:

import { useState } from 'react';
import { Form } from '@rjsf/daisyui';
import validator from '@rjsf/validator-ajv8';

function App() {
  const [theme, setTheme] = useState('light');

  return (
    <div data-theme={theme}>
      <select value={theme} onChange={(e) => setTheme(e.target.value)}>
        <option value='light'>Light</option>
        <option value='dark'>Dark</option>
        <option value='cupcake'>Cupcake</option>
        <option value='cyberpunk'>Cyberpunk</option>
        <option value='synthwave'>Synthwave</option>
        {/* Add more themes as needed */}
      </select>

      <Form schema={schema} validator={validator} />
    </div>
  );
}

Development

To develop locally:

# Clone the repository
git clone https://github.com/rjsf-team/react-jsonschema-form.git
cd react-jsonschema-form

# Install dependencies
npm install

# Build packages
npm run build

# Run playground
npm run start:playground

To test the DaisyUI theme specifically, select it from the themes dropdown in the playground.

License

Apache-2.0