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

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

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

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

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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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>
  );
}


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x