The Candour Component Library is a collection of reusable React components designed to simplify the development of user interfaces. This library provides a set of well-crafted components that can be easily integrated into your projects, ensuring a consistent look and feel while saving development time. Whether you're building a small application or a large-scale project, these components are flexible, customizable, and ready to use.
Key Features
Customizable Components: Each component comes with a variety of props for customization, allowing you to tailor styles and behavior to your needs.
Accessibility: Designed with accessibility in mind to ensure your applications are usable by everyone.
Lightweight: The library is lightweight and optimized for performance, ensuring a smooth user experience.
Responsive Design: Components are built to be responsive, adapting to different screen sizes seamlessly.
<DropdownWrapper><DropdownTrigger><Buttontype="button"variant="solid"onClick={()=>{}}>
Trigger Drop Down
</Button></DropdownTrigger><DropDownMenuonAction={handleDropDownAction}size="lg"radius="md"shadow="xl"><DropdownItemitemKey="new"text="New file"/><DropdownItemitemKey="old"text="Old file"/></DropDownMenu></DropdownWrapper>
The RegularDatePicker component is a flexible and customizable. It allows users to select a single date or a date range, with support for various configurations such as date format, display options, and accessibility features.
Features
Supports both single-date and range selection.
Customizable date format for display and input.
Optional footer and shortcut options to improve usability.
Min and Max date restrictions to ensure valid date selection.
Example Usage
Below are two examples demonstrating how to use the RegularDatePicker component in a React application: one in range mode and the other in single-date mode.
Example 1: Date Range Selection (Range Mode)
In this example, the RegularDatePicker allows users to select a range of dates. The useRange prop is set to true, and asSingle is set to false.
importReact,{useState}from'react';import{RegularDatePicker}from'@candourorg/ui';constDateRangePickerExample: React.FC=()=>{const[value,setValue]=useState<DateRange>({startDate: null,endDate: null,});console.log(value);return(<RegularDatePickeruseRange={true}label="Select a Date Range"placeholder="Select date range"asSingle={false}value={value}displayFormat={'DD/MM/YYYY'}onChange={(newValue: DateValueType)=>setValue(newValueasDateRange)}/>);};
Example 2: Single-Date Selection (Single Mode)
In this example, the RegularDatePicker is configured for selecting a single date. The useRange prop is set to false, and asSingle is set to true.
importReact,{useState}from'react';import{RegularDatePicker}from'@candourorg/ui';constDateRangePickerExample: React.FC=()=>{const[value,setValue]=useState<DateRange>({startDate: null,endDate: null,});console.log(value);return(<RegularDatePickeruseRange={false}label="Select a Date Range"placeholder="Select date range"asSingle={true}value={value}displayFormat={'DD/MM/YYYY'}onChange={(newValue: DateValueType)=>setValue(newValueasDateRange)}/>);};
Key Differences Between Range Mode and Single-Date Mode
The RegularDatePicker component can be used in two distinct modes: Range Mode and Single-Date Mode. Below is a comparison of the key differences between these modes:
Feature
Range Mode
Single-Date Mode
useRange Prop
Set to true to enable range selection.
Set to false to disable range selection.
asSingle Prop
Set to false to allow selecting a range of dates.
Set to true for selecting a single date.
Purpose
Allows selecting a start and end date, ideal for booking systems and event scheduling.
Allows selecting only one date, ideal for picking specific dates like birthdays.
Value Type
Managed as a DateRange object with startDate and endDate.
Managed as a single DateValueType.
By toggling the useRange and asSingle props, you can easily switch between range and single-date selection modes to fit your specific use case.
