Kollia

Deeply customizable UI Components for react.js applications.

installation

To install this library, you can run:

npm install kollia or yarn add kollia

Usage

Here's an example of basic usage:

    import React from 'react';
    import { DatePicker } from 'kollia';

    function MyApp() {
        return (
            <div>
                <DatePicker 
                    title="Avaibility" 
                    setItemLabelValue={() => "€ 500"} 
                    onSelect={value => console.log(value)} />
            </div>
        );
    }

Documentation

DatePicker

Prop	Type	Default	Description
title	string	n/a	Title of the component
lengend	string[]	["Unavailable","Available"]	Lengends text
className	string	n/a	Custom class name(s) that will be added
onSelect	(value: {startDate: Date, endDate: Date}) => void	n/a
setItemLabelValue	(date: Date) => string	n/a	function called to add custom label to each date (we have to return the label as a string)
textColor	string	#1A2B48	Color of the text in the calendar
headerColor	string	#5E6D77	color of the header text (day's names)
enableColor	{borderColor: string; color: string; textColor: string}	{borderColor: #dadcdd; color: #5191FA; textColor: #fff}	color config of the enabled dates
disableColor	{borderColor: string; color: string; textColor: string}	{borderColor: #dadcdd; color: #fff; textColor: #dadcdd}	color config of the disabled dates
activeColor	string	#FA5636	color of the current date
hiddenColor	string	n/a	set color here to display date that are not in the current month
selectedColor	{color: string; backgroundColor: string}	{color: #fff; backgroundColor: #5191FA}	colors config of the selected dates
outerBorderColor	string	#dadcdd	border color of the calendar
innerBorderColor	string	#dadcdd	border color of each date in the calendar
headerBorderColor	string	#dadcdd	border color of the header bar
innerBorderRadius	number	5	border radius of each date in the calendar
outerBorderRadius	number	5	border width of the calendar
innerBorderWidth	number	1	border width of each date in the calendar
headerBorderWidth	number	1	border width of the header bar
disabledDates	Date[]	n/a	list of date to enable or disable dependind of the value of the enableOnly props
enableOnly	boolean	false	if true enable only the date provided in disabledDates props. All other dates will be disabled

Carousel

Author

Djibril ISSOUFOU