React-test-janouy NPM

React simple date picker

Description

react-test-janouy is a simple React component that allows you to add a calendar date picker to your React application.

Main features

☀️ Select days, ranges or whatever
🌎 Localizable into many language
📄 Easy to integrate

Installation

To install React Easy Modale in your project, you can use NPM:

npm i react-test-janouy

Sleep Well : the smart alarm-clock app

Sleep Well aims at developing a smart alarm clock for iPhones that monitors your breathing rhythm while you sleep to determine your sleep cycles.

Technologies

JS
CSS
React

Contribute to the project

Sleep Well is an open source project. Feel free to fork the source and contribute with your own features.

Authors

Our code squad : Francis & Stéphane

Licensing

This project was built under the Creative Commons licence.

Usage

To use Calendar in your React project, you need to import it into your component and use it as a regular React component. Here's an example:

import Calendar from "react-test-janouy/dist/pages/Calendar";
import { useState } from "react";

function MyComponent() {
    const language = "en";
	const dateFormat = "mm.dd.yyyy";
    const [date, setDate] = useState();
    const [isCalendarOpen, setIsCalendarOpen] = useState(false);

    const showCalendar = () => {
        setIsCalendarOpen(true);
    };

    const hideModal = () => {
        setIsModalOpen(false);
    };

  return (
    <div onMouseLeave={() => setIsCalendarOpen(false)}>
        <div onClick={() => showCalendar()}>Date :</div>
        <Calendar
            isCalendarOpen={isCalendarOpen}
            setIsCalendarOpen={setIsCalendarOpen}
            selectedDate={date}
            handleSelectedDate={(date) => setDate(date)}
            language={language}
            dateFormat={dateFormat}
        />
	</div>
  );
}

Customizable properties

The following properties can be used to customize the EasyModale component:

isCalendarOpen (boolean): Determines whether the calendar is currently open or not.
setIsCalendarOpen (function): A function that determines if the calendar must be closed or opened with an event.
selectedDate (string): A string that represents the date on which the user clicked.
handleSelectedDate (function): A function that determines the date on which the user clicked.
language (string): Determinates the calendar's language. (ex: 'en'). Click [Here to see supported languages.
dateFormat (string): Determinates the date's format. (ex: 'mm/dd/yyyy').