
Security News
npm ‘is’ Package Hijacked in Expanding Supply Chain Attack
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.
react-items-carousel
Advanced tools
$ npm install react-items-carousel --save
import React, { useState } from 'react';
import ItemsCarousel from 'react-items-carousel';
export default () => {
const [activeItemIndex, setActiveItemIndex] = useState(0);
const chevronWidth = 40;
return (
<div style={{ padding: `0 ${chevronWidth}px` }}>
<ItemsCarousel
requestToChangeActive={setActiveItemIndex}
activeItemIndex={activeItemIndex}
numberOfCards={2}
gutter={20}
leftChevron={<button>{'<'}</button>}
rightChevron={<button>{'>'}</button>}
outsideChevron
chevronWidth={chevronWidth}
>
<div style={{ height: 200, background: '#EEE' }}>First card</div>
<div style={{ height: 200, background: '#EEE' }}>Second card</div>
<div style={{ height: 200, background: '#EEE' }}>Third card</div>
<div style={{ height: 200, background: '#EEE' }}>Fourth card</div>
</ItemsCarousel>
</div>
);
};
Property | Type | Default | Description |
---|---|---|---|
children * | node[] | The cards to render in the carousel. You must specify a height for each card. | |
requestToChangeActive * | function | This function accepts the new activeItemIndex and should update your component state. | |
activeItemIndex * | int | This defines which item should be active. | |
numberOfCards | number | 3 | Number of cards to show per slide. |
infiniteLoop | boolean | false | Enable infinite loop. see Infinite loop limitations |
gutter | number | 0 | Space between cards. |
showSlither | boolean | false | If true a slither of next card will be shown. |
firstAndLastGutter | boolean | false | If true first and last cards will have twice the space. |
enablePlaceholder | boolean | false | If true, component will render placeholderItem until children are passed. |
placeholderItem | node | null | If enablePlaceholder is true, this will be rendered until children are passed. |
numberOfPlaceholderItems | number | 0 | This controls how many placeholderItem to render if enablePlaceholder is true. |
activePosition | enum ('left', 'center', 'right') | left | The position of the active item. |
rightChevron | node | null | Right chevron node. |
leftChevron | node | null | Left chevron node. |
chevronWidth | number | 0 | This value should be the width of left and right chevron. |
outsideChevron | boolean | false | If true the chevron will be rendered outside the carousel. |
alwaysShowChevrons | boolean | false | If true the chevrons will always be visible even if there were no cards to scroll. |
slidesToScroll | number | 1 | Number of cards to scroll when right and left chevrons are clicked. |
disableSwipe | boolean | false | Disables left and right swiping on touch devices. |
onStateChange | func | null | This function will be called when state change with { isFirstScroll: Boolean, isLastScroll: Boolean } . It can be used to fetch more data for example. |
classes | { wrapper: string, itemsWrapper: string, itemsInnerWrapper: string, itemWrapper: string, rightChevronWrapper: string, leftChevronWrapper: string } | {} | An object of classes to pass to the carousel inner elements |
If infiniteLoop
was set to true, the following props are ignored
activePosition
: will always be left
alwaysShowChevrons
: will always be true
To contribute, follow these steps:
yarn
yarn start:gh
localhost:9000
MIT
FAQs
React Items Carousel
The npm package react-items-carousel receives a total of 4,733 weekly downloads. As such, react-items-carousel popularity was classified as popular.
We found that react-items-carousel demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.
Security News
A critical flaw in the popular npm form-data package could allow HTTP parameter pollution, affecting millions of projects until patched versions are adopted.
Security News
Bun 1.2.19 introduces isolated installs for smoother monorepo workflows, along with performance boosts, new tooling, and key compatibility fixes.