Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-items-carousel
Advanced tools
Readme
$ 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 10,773 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.