dcantatore / react-rrule-builder-ts

rrule component for react with mui
MIT License
7 stars 2 forks source link

react-rrule-builder-ts

npm version

Storybook

NPM

Overview

react-rrule-builder-ts is a React component that generates RRULE strings for use in iCalendar events, built with TypeScript. This package is inspired by the original react-rrule-generator, which is now deprecated.

You can view the demo and explore component functionality in the storybook.

Status

Semi-Pre-Release: This package is currently in pre-release. Although it's available on npm, it is not yet stable for production use. The package is under active development and testing. Once it reaches stability, this note will be removed.

Features

Installation

To install the package, run:

npm install react-rrule-builder-ts

Usage

import RRuleBuilder from 'react-rrule-builder-ts';
import {AdapterLuxon} from "@mui/x-date-pickers/AdapterLuxon"; // ** YOUR DATE ADAPTER **
import {DateTime} from "luxon"; // ** BASED ON YOUR DATE ADAPTER **

const MyComponent = () => {
  const handleRRuleChange = (rruleString) => {
    console.log(rruleString);
  };

  return (
    <RRuleBuilder
      dateAdapter={AdapterLuxon} // ** YOUR DATE ADAPTER **
      datePickerInitialDate={DateTime.now()} // ** BASED ON YOUR DATE ADAPTER ** 
      onChange={handleRRuleChange}
      enableYearlyInterval={true}
    />
  );
};

API

RRuleBuilder Props

🛠️ = Coming soon / in progress

Store and Actions

The component uses a Zustand store for state management, with the following state and actions:

BuilderState

🛠️ = Coming soon / in progress

BuilderActions

🛠️ = Coming soon / in progress

Other Notes