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-spring-3d-carousel
Advanced tools
Readme
A 3D Carousel component for images built with React and utilizing react-spring for controlling slide transitions. It's primarily meant to be controlled via the goToSlide prop but I also provided a showNavigation prop if you don't feel like making your own navigation.
This should go without saying, but if you use this component make sure to test it for performance and compatability with your target browsers.
Install it via npm:
npm i react-spring-3d-carousel
or yarn:
yarn add react-spring-3d-carousel
Then import the Carousel component like so :
import Carousel from 'react-spring-3d-carousel';
The only thing this component needs to run is an array of slides, which are objects with a unique key property and a content property containing an image instance :
const slides = [
{
key: uuidv4(),
content: <img src="https://picsum.photos/800/800/?random" alt="1" />
},
{
key: uuidv4(),
content: <img src="https://picsum.photos/800/800/?random" alt="2" />
},
{
key: uuidv4(),
content: <img src="https://picsum.photos/600/800/?random" alt="3" />
},
{
key: uuidv4(),
content: <img src="https://picsum.photos/800/500/?random" alt="4" />
},
{
key: uuidv4(),
content: <img src="https://picsum.photos/800/800/?random" alt="5" />
},
{
key: uuidv4(),
content: <img src="https://picsum.photos/500/800/?random" alt="6" />
},
{
key: uuidv4(),
content: <img src="https://picsum.photos/800/600/?random" alt="7" />
},
{
key: uuidv4(),
content: <img src="https://picsum.photos/800/800/?random" alt="8" />
}
];
...
<Carousel slides={slides} />
And you're all set. You can also use props for better control of how the carousel looks and behaves:
Name | Default value | Description |
---|---|---|
slides | --- | An array containing elements of the form { key, content, onClick? } where key holds any unique value and content holds a reference to a JSX <img /> to be displayed. onClick is an optional property that may be used to pass a callback method which will be invoked when the slide is clicked. |
goToSlide | null | Setting this prop will cause the carousel to animate towards the provided index in the slides array. If showNavigation is set to false this prop is how you're expected to control the carousel. |
goToSlideDelay | 200 | The amount of milliseconds to delay each slide before moving to the next one while animating towards the index provided in goToSlide . |
offsetRadius | 2 | Number of carousel elements to display to the sides of the current slide, this value is clamped between 1 and Math.floor(slides.length/2) , and defaults to 2 when it's possible (if there are enough slide elements). |
animationConfig | { tension: 120, friction: 14 } | A config object passed to the slides' Spring element to control the nature of their animation, for more information check the react-spring docs. |
offsetFn | undefined | An optional callback function invoked with (offsetFromRadius: number, index: number) by each slide per animation to override its style in relation to its current offset (negative numbers are to the left of the center, positive are to the right, with 0 being the center) and index. Should return an object { transform?: string; left?: string | number; opacity?: number } . Any missing key within the object would trigger the default style behaviours. e.g. (offsetFromCenter) => ({ opacity: 1 - Math.abs(offsetFromCenter) / 10 }) would change the way the opacity is rendered but not affect transform or left . |
FAQs
A 3D Carousel component for images built with React and utilizing react-spring for controlling slide transitions.
The npm package react-spring-3d-carousel receives a total of 3,295 weekly downloads. As such, react-spring-3d-carousel popularity was classified as popular.
We found that react-spring-3d-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.