Add dynamic prop

__tests__/__fixtures__/nodes.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FunctionComponent, useState } from 'react';
 
 export const carouselItemNodes = (len: number) => {
 	return new Array(len).fill(0).map((_, i) => {
@@ -6,6 +6,31 @@ export const carouselItemNodes = (len: number) => {
 	});
 };
 
+export const dynamicCarouselItemNodes = () => {
+	const Component: FunctionComponent<DynamicCarouselItemNodesProps> = ({
+		id,
+	}: DynamicCarouselItemNodesProps) => {
+		const [state, setstate] = useState(0);
+		return (
+			<button key={id} onClick={() => setstate(state + 1)}>
+				{state}
+			</button>
+		);
+	};
+
+	return [
+		<Component id={1} />,
+		<Component id={2} />,
+		<Component id={3} />,
+		<Component id={4} />,
+	];
+};
+
+interface DynamicCarouselItemNodesProps {
+	id: number;
+	children?: React.ReactNode;
+}
+
 export const reactNodes = (prop: string, len: number) => {
 	return new Array(len).fill(0).map((_, i) => {
 		return {

__tests__/carousel.spec.tsx

@@ -2,7 +2,7 @@ import React, { MouseEvent } from 'react';
 import { render, cleanup, fireEvent } from '@testing-library/react';
 import { Carousel } from '../src/components/carousel';
 import { defaultProps } from '../src/components/carousel/defaultProps';
-import { carouselItemNodes } from './__fixtures__/nodes';
+import { carouselItemNodes, dynamicCarouselItemNodes } from './__fixtures__/nodes';
 import * as helpers from '../src/helpers';
 
 describe('<Carousel />', () => {
@@ -40,7 +40,11 @@ describe('<Carousel />', () => {
 
 	it('should render right layout', async () => {
 		const { getByTestId } = render(
-			<Carousel {...defaultProps} infinite={false} children={carouselItemNodes(6)} />,
+			<Carousel
+				{...defaultProps}
+				infinite={false}
+				children={carouselItemNodes(6)}
+			/>,
 		);
 		const carousel = getByTestId('carousel');
 
@@ -52,7 +56,11 @@ describe('<Carousel />', () => {
 
 	it('should transform when pressing arrow keys', async () => {
 		const { getByTestId } = render(
-			<Carousel {...defaultProps} children={carouselItemNodes(6)} useArrowKeys={true} />,
+			<Carousel
+				{...defaultProps}
+				children={carouselItemNodes(6)}
+				useArrowKeys={true}
+			/>,
 		);
 		const carousel = getByTestId('carousel');
 
@@ -69,7 +77,11 @@ describe('<Carousel />', () => {
 
 	it("shouldn't listen keyboard event if useArrowKeys option false", async () => {
 		const { getByTestId } = render(
-			<Carousel {...defaultProps} children={carouselItemNodes(6)} useArrowKeys={false} />,
+			<Carousel
+				{...defaultProps}
+				children={carouselItemNodes(6)}
+				useArrowKeys={false}
+			/>,
 		);
 		const carousel = getByTestId('carousel');
 
@@ -115,7 +127,11 @@ describe('<Carousel />', () => {
 
 	it('should slide to left when click left button', async () => {
 		const { getByTestId } = render(
-			<Carousel {...defaultProps} infinite={true} children={carouselItemNodes(4)} />,
+			<Carousel
+				{...defaultProps}
+				infinite={true}
+				children={carouselItemNodes(4)}
+			/>,
 		);
 		const carousel = getByTestId('carousel');
 		const button = carousel.querySelector('button');
@@ -134,7 +150,11 @@ describe('<Carousel />', () => {
 
 	it('should slide to right when click right button', async () => {
 		const { getByTestId } = render(
-			<Carousel {...defaultProps} infinite={true} children={carouselItemNodes(4)} />,
+			<Carousel
+				{...defaultProps}
+				infinite={true}
+				children={carouselItemNodes(4)}
+			/>,
 		);
 		const carousel = getByTestId('carousel');
 		const button = carousel.querySelectorAll('button')[1];
@@ -218,7 +238,11 @@ describe('<Carousel />', () => {
 
 	it("shouldn't rotate items if carousel is not infinite", async () => {
 		const { getByTestId } = render(
-			<Carousel {...defaultProps} infinite={false} children={carouselItemNodes(10)} />,
+			<Carousel
+				{...defaultProps}
+				infinite={false}
+				children={carouselItemNodes(10)}
+			/>,
 		);
 		const carousel = getByTestId('carousel');
 		const button = carousel.querySelector('button');
@@ -237,7 +261,11 @@ describe('<Carousel />', () => {
 
 	it('should rotate items if carousel is infinite', async () => {
 		const { getByTestId } = render(
-			<Carousel {...defaultProps} infinite={true} children={carouselItemNodes(10)} />,
+			<Carousel
+				{...defaultProps}
+				infinite={true}
+				children={carouselItemNodes(10)}
+			/>,
 		);
 		const carousel = getByTestId('carousel');
 		const button = carousel.querySelector('button');
@@ -253,4 +281,24 @@ describe('<Carousel />', () => {
 			defaultProps.transition * 1000,
 		);
 	});
+
+	it('should render stateful items when dynamic prop is true', async () => {
+		const { getByTestId } = render(
+			<Carousel
+				{...defaultProps}
+				dynamic={true}
+				infinite={true}
+				children={dynamicCarouselItemNodes()}
+			/>,
+		);
+
+		const carousel = getByTestId('trackList');
+		const button = carousel.querySelector('button');
+
+		expect(button).not.toBeNull();
+
+		fireEvent.click(button!);
+
+		expect(button!.innerHTML).toEqual('1');
+	});
 });

src/components/carousel/defaultProps.ts

@@ -12,4 +12,5 @@ export const defaultProps: Required<CarouselProps> = {
 	className: '',
 	useArrowKeys: false,
 	a11y: {},
+	dynamic: false,
 };

src/components/carousel/index.tsx

@@ -30,10 +30,12 @@ export const Carousel: FunctionComponent<CarouselProps> = (userProps: CarouselPr
 		getShowArrow(props.children.length, props.show, props.infinite, current),
 	);
 
-	React.useEffect(() => {
+	if (props.dynamic) {
-		const newItems = updateNodes(items, userProps.children);
+		React.useEffect(() => {
-		setItems(newItems);
+			const newItems = updateNodes(items, userProps.children);
-	}, userProps.children);
+			setItems(newItems);
+		}, userProps.children);
+	}
 
 	const slide = (direction: SlideDirection, slide: number): void => {
 		if (
@@ -154,6 +156,7 @@ export interface CarouselProps {
 	className?: string;
 	useArrowKeys?: boolean;
 	a11y?: { [key: string]: string };
+	dynamic: boolean;
 }
 
 export interface CarouselState {

website/docs/carousel.md

@@ -11,16 +11,17 @@ Creates carousel component.
 
 ### Props
 
-| Name         |  type   | required | default |                                                                       descripiton |
+| Name         |  type   | required | default |                                                                                     descripiton |
-| ------------ | :-----: | -------: | ------: | --------------------------------------------------------------------------------: |
+| ------------ | :-----: | -------: | ------: | ----------------------------------------------------------------------------------------------: |
-| children     | Node[]  |     true |      [] |                                      Child items that will be wrapped by carousel |
+| children     | Node[]  |     true |      [] |                                                    Child items that will be wrapped by carousel |
-| show         | number  |    false |       1 |                                              number of items to show at per slide |
+| show         | number  |    false |       1 |                                                            number of items to show at per slide |
-| slide        | number  |    false |       1 |                                                 number of how many items to slide |
+| slide        | number  |    false |       1 |                                                               number of how many items to slide |
-| infinite     | boolean |    false |    true |                                                                scrolling infinity |
+| infinite     | boolean |    false |    true |                                                                              scrolling infinity |
-| transition   | number  |    false |     0.5 |                                    same as css transition property's second value |
+| transition   | number  |    false |     0.5 |                                                  same as css transition property's second value |
-| swiping      | boolean |    false |   false |                                   enable swiping/dragging with mouse/touch events |
+| swiping      | boolean |    false |   false |                                                 enable swiping/dragging with mouse/touch events |
-| swipeOn      | number  |    false |       1 |                 percantage of item width that slides when user drag count exceeds |
+| swipeOn      | number  |    false |       1 |                               percantage of item width that slides when user drag count exceeds |
-| responsive   | boolean |    false |   false | enables the feature that adjusts items width according to screen size dynamically |
+| responsive   | boolean |    false |   false |               enables the feature that adjusts items width according to screen size dynamically |
-| className    | string  |    false |      "" |                                                same as react's className property |
+| className    | string  |    false |      "" |                                                              same as react's className property |
-| useArrowKeys | boolean |    false |   false |                                             enables sliding when press arrow keys |
+| useArrowKeys | boolean |    false |   false |                                                           enables sliding when press arrow keys |
-| a11y         |  Array  |    false |      {} |                                                          accessibility attributes |
+| a11y         |  Array  |    false |      {} |                                                                        accessibility attributes |
+| dynamic      | Boolean |    false |   false | if items are stateful, specify this option as true. Also give unique key to each item (like id) |