reactjs-weekdays-picker

A customizable React module for day selection with various components like dropdown selectors, circular day pickers, and custom menu selectors.

Live Demo: https://jaditi930.github.io/reactjs-weekdays-picker/

Installation

To install the latest stable version:

npm install reactjs-weekdays-picker

Usage

1. DefaultSelector

A circular day picker component with customizable day length display and multiple selection options.

import React, { useState } from 'react';
import { DefaultSelector } from 'reactjs-weekdays-picker';

export default function App() {
  const [selectedDays, setSelectedDays] = useState([]);

  return (
    <DefaultSelector
      multiple={true}
      state={selectedDays}
      setState={setSelectedDays}
      dayList={['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']}
      selectedColor="#007bff"
      unselectedColor="#d3d3d3"
      selectedTextColor="#ffffff"
      unselectedTextColor="#000000"
      width="200px"
      displayLength={3}  // Display the first three characters of each day name
    />
  );
}

2. DropdownSelector

A dropdown component that allows users to select one or more days from a list.

import React, { useState } from 'react';
import { DropdownSelector } from 'reactjs-weekdays-picker';

export default function App() {
  const [selectedDays, setSelectedDays] = useState([]);

  return (
    <DropdownSelector
      state={selectedDays}
      setState={setSelectedDays}
      dayList={['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']}
      multiple={true}
      selectedColor="#007bff"
      unselectedColor="#d3d3d3"
      width="200px"
    />
  );
}

3. CircularDayPicker

A circular day picker component that visualizes selected days in a pie chart format.

import React, { useState } from 'react';
import { CircularSelector } from 'reactjs-weekdays-picker';

export default function App() {
  const [selectedDays, setSelectedDays] = useState([]);

  return (
    <CircularSelector
      state={selectedDays}
      setState={setSelectedDays}
      dayList={['Mon', 'Tue', 'Wed', 'Thu', 'Fri']}
      selectedColor="#007bff"
      unselectedColor="#d3d3d3"
    />
  );
}

4. CustomMenuSelector

A custom dropdown component with tick icons for selected items.

import React, { useState } from 'react';
import { CustomMenuSelector } from 'reactjs-weekdays-picker';

export default function App() {
  const [selectedDays, setSelectedDays] = useState([]);

  return (
    <CustomMenuSelector
      state={selectedDays}
      setState={setSelectedDays}
      dayList={['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']}
      selectedColor="#007bff"
      unselectedColor="#d3d3d3"
      placeholder="Select days"
    />
  );
}

Props

Common Props for All Components

| Name | Type | Required | Default | Description | |----------------------|----------|----------|-----------------------------------------------|------------------------------------------------------| | multiple | bool | false | false | Whether to allow multiple selections. | | dayList | array | false | ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] | List of days to display. | | state | array | false | [] | State to manage selected days. | | setState | function | false | undefined | Function to update the state of selected days. | | onDayChange | function | false | undefined | Callback function that triggers when the selected days change. Receives the updated array of selected days as an argument. | | selectedColor | string | false | #007bff | Background color for selected items. | | unselectedColor | string | false | #d3d3d3 | Background color for unselected items. | | selectedTextColor | string | false | #ffffff | Text color for selected items. | | unselectedTextColor| string | false | #000000 | Text color for unselected items. | | fontSize | string | false | inherit | Font size of the text. | | fontWeight | string | false | normal | Font weight of the text. | | fontStyle | string | false | normal | Font style of the text. |

Additional Props for DefaultSelector

| Name | Type | Required | Default | Description | |------------------------|-----------------------|----------|------------|-----------------------------------------------| | width | string | false | '150px' | Width of the component. | | selectedHoverColor | string | false | #0056b3 | Hover color for selected items. | | unselectedHoverColor | string | false | #f0f0f0 | Hover color for unselected items. | | displayLength | number | false | 1 | Number of characters to display for each day. | | optionContainerStyle | React.CSSProperties | false | {}| Custom styles for the options container. | | optionStyle | React.CSSProperties | false | {}| Custom styles for each option. |

Additional Props for CircularDayPicker

| Name | Type | Required | Default | Description | |--------------|--------|----------|---------|--------------------------------------------------| | radius | number | false | 100 | Radius of the circular chart. | | strokeWidth| number | false | 10 | Width of the stroke for the pie chart segments. | | size | string | false | 100px | Size of the circular chart. |

Additional Props for DropdownSelector

| Name | Type | Required | Default | Description | |-----------------------|----------|----------|-----------------|-----------------------------------------------| | width | string | false | 150px | Width of the component. | | inputTextColor | string | false | #000000 | Color of the input text. | | placeholder | string | false | Select days | Placeholder text for the dropdown input. | | inputBgColor | string | false | #fff | Background color of the input box. | | inputBoxStyle | React.CSSProperties | false | {}| Custom styles for the input box. | | dropdownContainerStyle | React.CSSProperties | false | {}| Custom styles for the dropdown container. | | dropdownItemStyle | React.CSSProperties | false | {}| Custom styles for each dropdown item. |

Additional Props for CustomMenuSelector

| Name | Type | Required | Default | Description | |-------------------------|-----------------------|----------|---------------|----------------------------------------------------| | width | string | false | 'auto' | Width of the component. | | inputTextColor | string | false | '#000000' | Color of the input text. | | placeholder | string | false | 'Select days' | Placeholder text for the dropdown input. | | iconAlign | string | false | 'right' | Alignment of icons in the dropdown menu. | | displayOption | string | false | 'both' | Determines what to display: icons, text, or both. | | showIcons | boolean | false | true | Whether to display icons next to the items. | | showTicks | boolean | false | true | Whether to show ticks for selected items. | | excludeDays | array | false | [] | List of days to exclude from the menu. | | iconOrder | number | false | 1 | Order of the icons in the dropdown. | | dayOrder | number | false | 2 | Order of the day names in the dropdown. | | tickOrder | number | false | 3 | Order of the tick marks in the dropdown. | | inputBgColor | string | false | #fff | Background color of the input box. | | inputBoxStyle | React.CSSProperties | false | {}| Custom styles for the input box. | | dropdownContainerStyle| React.CSSProperties | false | {} | Custom styles for the dropdown container. | | dropdownItemStyle | React.CSSProperties | false | {} | Custom styles for each dropdown item. |

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing

We welcome contributions! Please open an issue or submit a pull request for any feature requests or bug fixes.