react-advanced-rrule-generator

A fully customizable React component for generating RFC 5545 compliant RRULE strings, powered by rrule with beautiful Tailwind CSS defaults and a rich API to override every visual piece.

🎯 Built for developers who need an out-of-the-box recurrence picker that doesn't force CSS imports or hard-to-override bundled styles.

Features

• ✅ Generates accurate RRULE strings (Daily, Weekly, Monthly, Yearly)
• ✅ Full end condition support: Never, After N occurrences, On date
• ✅ Beautiful Tailwind CSS defaults — no separate CSS import required if you use Tailwind
• ✅ Override any element's Tailwind classes via the classNames prop
• ✅ Drop in your own React components for DayCheckbox and FrequencySelect
• ✅ Built with TypeScript — full type safety
• ✅ Lives entirely in React context — no external state needed

Installation

npm install react-advanced-rrule-generator rrule date-fns
# or
pnpm add react-advanced-rrule-generator rrule date-fns

If you are not using Tailwind CSS globally, import the bundled stylesheet:

import 'react-advanced-rrule-generator/dist/style.css';

Basic Usage

import { useState } from 'react';
import { RRuleGenerator } from 'react-advanced-rrule-generator';

function App() {
  const [rrule, setRrule] = useState('');

  return (
    <div className="max-w-2xl mx-auto p-4">
      <RRuleGenerator onChange={setRrule} />
      <p className="mt-4 font-mono text-sm">{rrule}</p>
    </div>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | onChange | (rrule: string) => void | required | Callback fired whenever the rule changes | | className | string | "" | Extra class applied to the root wrapper | | theme | "default" \| "dark" | "default" | Built-in theme switcher | | locale | string | "en" | Locale code for labels (see Localization) | | classNames | ClassNames | undefined | Fine-grained Tailwind overrides per element | | components | Components | undefined | Drop-in custom React component overrides |

Style Customization via classNames

Pass a classNames object to target specific UI elements:

<RRuleGenerator
  onChange={setRrule}
  classNames={{
    container: 'p-6 rounded-2xl border border-indigo-200 shadow-md',
    section: 'bg-indigo-50 p-4 rounded-lg mb-4',
    label: 'text-indigo-700 font-bold text-xs uppercase tracking-widest',
    button: 'rounded-full px-4 py-1.5 font-medium border transition-all',
    buttonActive: 'bg-indigo-600 text-white border-indigo-600',
    buttonInactive: 'bg-white text-gray-600 border-gray-200 hover:bg-indigo-50',
    input: 'border-indigo-300 rounded-lg focus:ring-indigo-500',
    previewContainer: 'bg-indigo-950 text-white rounded-xl p-4',
    previewTitle: 'text-indigo-300 font-semibold',
    previewText: 'text-white capitalize',
    previewCode: 'text-indigo-300 font-mono text-xs',
  }}
/>

Available ClassNames keys

| Key | Targets | |-----|---------| | container | Root wrapper div | | section | Each form section block | | label | Section labels | | button | All toggle/select buttons | | buttonActive | Active/selected button state | | buttonInactive | Inactive/unselected button state | | input | Number and date inputs | | previewContainer | Preview panel wrapper | | previewTitle | "Preview" heading | | previewText | Human-readable recurrence text | | previewCode | RRULE string code block |

Component Overrides via components

Replace the default DayCheckbox or FrequencySelect with your own React components:

import type { DayCheckboxProps, FrequencyButtonProps } from 'react-advanced-rrule-generator';

const MyDayCheckbox: React.FC<DayCheckboxProps> = ({ label, checked, onChange }) => (
  <button
    type="button"
    onClick={() => onChange(!checked)}
    className={`w-10 h-10 rounded-full font-semibold ${
      checked ? 'bg-violet-500 text-white' : 'bg-gray-100 text-gray-600'
    }`}
  >
    {label.slice(0, 2)}
  </button>
);

const MyFrequencyButton: React.FC<FrequencyButtonProps> = ({ value, label, selected, onClick }) => (
  <button
    type="button"
    onClick={() => onClick(value)}
    className={`px-4 py-2 rounded-lg font-medium transition-all ${
      selected
        ? 'bg-gradient-to-r from-violet-500 to-purple-600 text-white shadow-lg'
        : 'bg-white border border-gray-200 text-gray-600 hover:bg-gray-50'
    }`}
  >
    {label}
  </button>
);

<RRuleGenerator
  onChange={setRrule}
  components={{
    DayCheckbox: MyDayCheckbox,
    FrequencySelect: MyFrequencyButton,
  }}
/>

TypeScript Types

import type { DayCheckboxProps, FrequencyButtonProps, ClassNames } from 'react-advanced-rrule-generator';

Development

# Clone and install dependencies
git clone https://github.com/Omkar9867/react-advanced-rrule-generator
cd react-advanced-rrule-generator
pnpm install

# Start local dev playground
pnpm dev

# Build the library
pnpm build

License

MIT © Omkar