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),
 	);
 
+	if (props.dynamic) {
 		React.useEffect(() => {
 			const newItems = updateNodes(items, 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

@@ -12,7 +12,7 @@ Creates carousel component.
 ### Props
 
 | Name         |  type   | required | default |                                                                                     descripiton |
-| ------------ | :-----: | -------: | ------: | --------------------------------------------------------------------------------: |
+| ------------ | :-----: | -------: | ------: | ----------------------------------------------------------------------------------------------: |
 | children     | Node[]  |     true |      [] |                                                    Child items that will be wrapped by carousel |
 | show         | number  |    false |       1 |                                                            number of items to show at per slide |
 | slide        | number  |    false |       1 |                                                               number of how many items to slide |
@@ -24,3 +24,4 @@ Creates carousel component.
 | className    | string  |    false |      "" |                                                              same as react's className property |
 | useArrowKeys | boolean |    false |   false |                                                           enables sliding when press arrow keys |
 | 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) |