react-weekdays-input 👋

A highly customizable and easy to use react input that allows users to select days of the week with a user friendly interface

Installation

npm i react-weekdays-input

Demo 👀

https://axelmy-projects-showcase.firebaseapp.com/react-weekdays-input

Usage 💻

import React, { useState } from 'react'
import { WeekdaysInput } from 'react-weekdays-input'

const Example = () => {
    const [daysAsString, setDaysAsString] = useState('0010010') //Wednesday and saturday active
    const [daysAsObject, setDaysAsObject] = useState([0, 0, 1, 0, 0, 1, 0]) //Wednesday and saturday active

    return (
        <>
            {/*Using default styling and props*/}
            <WeekdaysInput
                value={daysAsString}
                onChange={(value) => setDaysAsString(value)}
            />

            {/*Using custom props*/}
            <WeekdaysInput
                value={daysAsObject}
                onChange={(value) => setDaysAsObject(value)}
                days={[
                    'monday',
                    'tuesday',
                    'wednesday',
                    'thursday',
                    'friday',
                    'saturday',
                    'sunday'
                ]}        
                showChars={2} //mo, tu, we, th, fr, sa, su
                activeDayStyle={{
                    backgroundColor: 'pink',
                    color: '#000'
                }}
                inactiveDayStyle={{
                    backgroundColor: '#cececec',
                    color: 'white'
                }}
                dayStyle={{
                    border: '2px dotted black',
                }}
                inputStyle={{
                    margin: '10px',
                }}
                forcedState={{
                    0: 'none',
                    1: 'none',
                    2: 'active',
                    3: 'inactive',
                    4: 'none',
                    5: 'none',
                    6: 'none'
                }}
                textCase={'firstToUpper'} //Mo, Tu, We, Th, Fr, Sa, Su
            />
        </>
    )
}

export default Example

API ✔

| Properties | type | default | description | |--|--|--|--| | value | string/array(int) | "0000000" | A string or an array of 7 integers representing the active days of the week. 0 being inactive, 1 being active. | | showChars | int | null | The numbers of chars to show for the days names. Ex: Monday=Mo. null will display the entire word | | onChange | function(string)/function(array(int)) | | The function that will be called when the user clicks on a day which provides the new value as a parameter. | | days | array | ['monday','tuesday','wednesday'... | The array defining the name of the days | | activeDayStyle | string | | The CSS styling to apply to active days | | inactiveDayStyle | string | | The CSS styling to apply to inactive days | | inputStyle | object | | The CSS styling of the whole input | | dayStyle | object | | The CSS styling used for each days | | forcedState | object | | Force certain days to be active or inactive. See examples above | | textCase | string | null | Defines the case of the text. Available: firstToUpper (Monday), toUpper (MONDAY), toLower (monday) | | wrapperClassName | string | null| A class that you may optionally provide for external modifications of the wrapper style. | | selectorClassName | string | null| A class that you may optionally provide for external modifications of the day selection style. | | renderOrder | array(int) | [0, 1, 2, 3, 4, 5, 6] | Determines which position each day will render. [Index]: the renderring slot. [Value]: The numeric value representing a day (nth index of the days array) that should be renderred in this slot. (Useful for renderring days in a different order, rather than the order in which they appear in the days parameter) |