@quphoria/react-weekdays-input
TypeScript icon, indicating that this package has built-in type declarations

1.3.1 • Public • Published

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

Example

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)

Package Sidebar

Install

npm i @quphoria/react-weekdays-input

Weekly Downloads

11

Version

1.3.1

License

MIT

Unpacked Size

347 kB

Total Files

7

Last publish

Collaborators

  • quphoria