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-touch-carousel
Advanced tools
Readme
Micro carousel framework for React.JS https://xiaody.github.io/react-touch-carousel/docs/
Yes, there are a few carousel libraries out there. Most of them are mature and easy to use for common usage, but none of them are convenient for the highly customized fancy UX that your team's cool designer wants.
react-touch-carousel does it in a different way. Instead of accepting some static DOM nodes and providing a thousand options, it does an inversion of control and lets you decide what content inside carousel are rendered and how they are styled, totally and dynamically.
To install the stable version:
npm install --save react-touch-carousel
import TouchCarousel from 'react-touch-carousel'
const listOfData = [
// your data array here
]
function CarouselContainer (props) {
// render the carousel structure
}
function renderCard (index, modIndex, cursor) {
const item = listOfData[modIndex]
// render the item
}
<TouchCarousel
component={CarouselContainer}
cardCount={listOfData.length}
cardSize={375}
renderCard={renderCard}
loop
autoplay={3000}
/>
The CarouselContainer()
and renderCard()
are where all the magic happens,
which shall be directed by you.
See some detailed examples.
Your container component of the carousel.
react-touch-carousel will pass it's touch listeners, dragging/active state, current position cursor to this component.
It is actually called like this:
<Component
cursor={usedCursor}
carouselState={carouselState}
onTouchStart={onTouchStart}
onTouchMove={onTouchMove}
onTouchEnd={onTouchEnd}
onTouchCancel={onTouchCancel}
>
{allYourRenderedCards}
</Component>
The card renderer.
All rendered cards joined as an array will be passed to props.component as it's children
.
The count of your cards, not including the padded ones.
The count of padded cards, necessary for looping.
Ignored if loop
is false
.
The width (or height if vertical
is true
) in pixels of a card.
Listen to vertical touch moves instead of horizontal ones. Default false
.
Tail to head, head to tail. Default true
.
Interval in milliseconds, 0 as disabled. Default 0
.
The cursor value for initial render.
Notice the sign of the number, normally it should be negative or zero(default).
Callback when the carousel is rested at a card.
Add some listeners if you need.
If deltCrossAxis * ignoreCrossMove > deltMainAxis
, carousel would ignore the dragging.
true
as 1
and false
as 0
. Default true
.
A cursor indicates the transition position of the carousel.
When the user swipes right, the number gets bigger. When the user swipes left, the number get smaller.
There are three steps to calculating the cursor's final value: specified, computed, used.
In most cases you just use the used cursor value to render your carousel content.
A carouselState is always passed to your component
and renderCard
.
It contains:
{
cursor, // the specified cursor
active, // is user interacting with the component, no matter dragging or pressing or clicking?
dragging, // is user dragging the component?
springing, // has user dragged and released the component, and the component is transitioning to the specified cursor?
moding // is the cursor moding?
}
This happens if you enable loop
. We keep the cursor in a valid range by "moding" it.
There are some advanced options, but normally you don't need to touch them.
Transition to a position.
Transition to next card.
Transition to previous card.
Hard jump to a position.
We provide an HOC for very basic mouse support. Internally it simulates touch events with the mouse events.
import touchWithMouseHOC from 'react-touch-carousel/lib/touchWithMouseHOC'
const Container = touchWithMouseHOC(CarouselContainer)
<TouchCarousel
component={Container}
/>
FAQs
Micro carousel framework for React.JS
The npm package react-touch-carousel receives a total of 2,459 weekly downloads. As such, react-touch-carousel popularity was classified as popular.
We found that react-touch-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.