All notable changes to this project will be documented in this file.
The format is based on Keep a Changelog and this project adheres to Semantic Versioning.
- Changed
next
,prev
, andonChange
typings to reflect their arguments and return value.
🎆🔥 React Material Ui Carousel has been fully refactored to use more modern react techniques such as hooks, functional components and other cool stuff. 🔥🎆
In general, its usage does not change.
- The library is now written in Typescript, for easier development, debugging and smaller package sizing.
- (Breaking) Now supports MUI 5 by default. Version 3 will not work with MUI 4 as of now. (@learus)
- Hence, minimum React version has been bumped to
^17.0.1
- Hence, minimum React version has been bumped to
- (Breaking) Now uses
framer/motion
to handle animations and gesture support. More animations will be added in the future. (@learus)- "Enter" and "Exit" animations are now simultaneous. No flash/gap of background between slide changes. Fixes issues 20, 61, 66.
- The first carousel item now renders without an "initial" animation. Implements feature request 92.
- (Breaking) The
timeout
prop is nowduration
and only supports a number that handles every aspect of the animation (enter, exit, e.t.c.)
- (Breaking) Now renders (preloads) all items initially and does not rerender them, unless there has been a state change. Implements feature request 88 (@learus)
- (Breaking)
CarouselStyleProps
→CarouselNavProps
(@learus) - Updated the Demo page look.
findDOMNode is deprecated in StrictMode.
warning has now been fixed. Material UI animations are no longer being used. Issue (@learus)Can't perform a React state update on an unmounted component.
warning has now been fixed. Issue (@learus)
- Removed any dependencies that were necessary for version 2. Only dependency now is
framer/motion
- Added fullHeightHoverButton class to styles, to fix
property does not exist
error. Issue (@learus)
- Removed unnecessary ternary operators. Issue (@learus)
- Fixed author link on README.md. It didn't work. (@hamidreza-nateghi)
- Added all
aria
props to:navButtonsWrapperProps
navButtonsProps
indicatorIconButtonProps
activeIndicatorIconButtonProps
indicatorContainerProps
(@Learus)
- Added
reverseEdgeAnimationDirection
prop. Normally, the Carousel reverses the animation direction when going from its last child to its first (right --> left). It also reverses the animation direction when going from its first child to its last (left --> right). This prop disables this functionality. Now every "next" button press will have a right directed animation and each "previous" button press will have a left directed animation. (@Learus)
- Fixed a bug where it was necessary to provide both
className
andstyle
when styling buttons or indicators, when using typescript. (@Learus)
- Updated
react-swipeable
package to^6.1.0
from^5.5.1
. (@Learus)
- Added
IndicatorIcon
prop explanation to Documentation. (@Learus)
- Corrected typo:
textAligh
-->textAlign
on README.md (@Learus)
- Updated the library's
peerDependencies
toreact: ^17.0.1
and@material-ui: ^4.11.3
(@Learus)
- Removed a wrongly placed brace in the class value of the navigation buttons, that caused them to not be hidden by default. (@8BitAron)
- Added
index.d.ts
explanation forIndicatorIcon
prop. (@Learus)
- Fixed
index.d.ts
2.2.0 new props to be optional, from mandatory. (@Learus)
- Added
boolean
propcycleNavigation
that allows the developer to choose whether they want the carousel to cycle when it reaches the first or last slide. (@Learus) - Added customizability to button icons. Using the
NextIcon
,PrevIcon
, andIndicatorIcon
one can customize the icon part of the navigation buttons and indicators. Those props are of typeReactNode
, meaning they can be whatever one wants them to be, without breaking important carousel functionality. (@Learus & @cansin) - Added even more customizability to buttons. Using the
NavButton
prop, you get full control of the navigation buttons. The prop should be a function that takes the specified parameters and returns a ReactNode. It's advised to return a<Button/>
using the givenonClick
parameter for the next and prev functions to work properly. It works in tandem with all other customization options:navButtonsProps
,navButtonsWrapperProps
,navButtonsAlwaysVisible
,navButtonsAlwaysInvisible
,fullHeightHover
, ...). (@Learus) - Added the Customizability section to the README.md (@Learus)
- Added 3rd example regarding customizability in the demo (TODO) (@Learus)
- Changed indicator rendering implementation to support customization, and introduce consistency with next and prev buttons. Now, working with MUI
IconButton
. (@Learus) - Changed
indicatorProps
toindicatorIconButtonProps
andactiveIndicatorProps
toactiveIndicatorIconButtonProps
(@Learus) - Changed
indicatorIconButtonProps
to style all indicators rather than only the non-active ones (@Learus) - Changed
buttonVisible
class'opacity
to1
from0.6
.
- Added
Button
import in the example code in README.md (@Learus)
- Added CHANGELOG.md (@Learus)
- Added
boolean
propswipe
that implements ability to toggle swipe behaviour. Default:true
. (@Learus) - Added
boolean
propstopAutoPlayOnHover
that implements ability to stop autoPlay (auto-scroll slides) when mousing over the carousel. Default:true
. (@Learus)
- Pressing the Next Button while being on the last slide, triggers the "Back" animation when going cycling back to the first slide. Fixes bug #1. (@Learus)
- Changed timeout explanation on README, to refer to Material UI Documentation. (@Learus)
- Removed
timer
prop from Demo code, since it was obsolete and not used. A relic of early development. (@Learus)
- Fixed a bug, where pressing the first indicator, while being on the last slide (and backwards) would trigger the wrong/unexpected animation. Fixed by change #1. (@Learus)
- Fixed a bug, where exit animation would not play if
timeout
prop was not anumber
. (@Learus)