There's some way to add fadein or slide effect on "react-dates-range" when i change between months?

user_12160496 0
Viewed 165

I'm using the library https://github.com/hypeserver/react-date-range , react 17.0.2 and next 12.0.0

I would like that when I change from one month to another, instead of making a sudden change, to be able to configure a Fade-In, or a Slide, just as it happens in the AirBnb calendar.

Does anyone know how I can do this? Thank you very much and sorry for the inconvenience.

This is my actual behavior

enter image description here

This is something like what I want, but it could also be a fade in or something similar.

enter image description here

reactjs css
1 Answers

Exactly like Airbnb i believe its not possible because the react-date-range works a little different from what airbnb does.

But you can get similar behavior using SwitchTransition and CSSTransition from react-transition-group library. You can check their docs here.

First, here's the code sample with DateRangerPicker using CSSTransition between months.

And below the same code, with comments on what its doing:

CSS file:

/*
Overflow the Calendar container 
.rdrDateRangeWrapper is a class that react-date-range creates internally
*/
.rdrDateRangeWrapper {
  overflow-x: hidden;
}

/*
.rdrMonths is the class that react-date-range creates internally for the month container calendar

.fadeRightToLeft classes is related to react-transition-group
Created for transition from right to left
*/
.fadeRightToLeft-enter .rdrMonths {
  opacity: 0;
  transform: translateX(100%);
}
.fadeRightToLeft-enter-active .rdrMonths {
  opacity: 1;
  transform: translateX(0%);
}
.fadeRightToLeft-exit .rdrMonths {
  opacity: 1;
  transform: translateX(0%);
}
.fadeRightToLeft-exit-active .rdrMonths {
  opacity: 0;
  transform: translateX(-100%);
}
.fadeRightToLeft-enter-active .rdrMonths,
.fadeRightToLeft-exit-active .rdrMonths {
  transition: opacity 100ms, transform 100ms;
}

/*
Same as fadeRightToLeft:
.fadeLeftToRight classes is related to react-transition-group
Created for transition from left to right
*/
.fadeLeftToRight-enter .rdrMonths {
  opacity: 0;
  transform: translateX(-100%);
}
.fadeLeftToRight-enter-active .rdrMonths {
  opacity: 1;
  transform: translateX(0%);
}
.fadeLeftToRight-exit .rdrMonths {
  opacity: 1;
  transform: translateX(0%);
}
.fadeLeftToRight-exit-active .rdrMonths {
  opacity: 0;
  transform: translateX(100%);
}
.fadeLeftToRight-enter-active .rdrMonths,
.fadeLeftToRight-exit-active .rdrMonths {
  transition: opacity 100ms, transform 100ms;
}

Component file:

import { useState } from "react";
import { addDays, isAfter } from "date-fns";
import { DateRangePicker } from "react-date-range";
import { SwitchTransition, CSSTransition } from "react-transition-group";

import "react-date-range/dist/styles.css";
import "react-date-range/dist/theme/default.css";
import "./styles.css";

export default function App() {
  const [state, setState] = useState([
    {
      startDate: new Date(),
      endDate: addDays(new Date(), 7),
      key: "selection"
    }
  ]);

  // state created to hold the first month that calendar is showing
  const [shownDateChangeValue, setShownDateChangeValue] = useState(new Date());

  // state created to check if use created next Month ou previous month
  const [isNextMonth, setIsNextMonth] = useState(true);

  return (
    <SwitchTransition mode="out-in">
      <CSSTransition
        /*** call the transition when month changes ***/
        key={shownDateChangeValue}
        /*** code related to SwitchTransition ***/
        addEndListener={(node, done) =>
          node.addEventListener("transitionend", done, false)
        }
        /*** Set the transition class related to the user action ***/
        classNames={isNextMonth ? "fadeRightToLeft" : "fadeLeftToRight"}
      >
        <DateRangePicker
          onChange={(item) => {
            setState([item.selection]);
          }}
          showSelectionPreview={true}
          moveRangeOnFirstSelection={false}
          months={2}
          ranges={state}
          direction="horizontal"
          /*** set the current month ***/
          shownDate={shownDateChangeValue}
          /*** Change shownDateChangeValue and isNextMonth states, dispatching the transition ***/
          onShownDateChange={(month) => {
            /* check if user click next or previous month */
            const isNext = isAfter(month, shownDateChangeValue);

            setIsNextMonth(isNext ? true : false);

            setShownDateChangeValue(month);
          }}
        />
      </CSSTransition>
    </SwitchTransition>
  );
}
user_47740450
Related