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-grid-carousel
Advanced tools
Readme
React resposive carousel component w/ grid layout
to easily create a carousel like photo gallery, shopping product card or anything you want
scroll-snap
for each item on mobile device$ npm install react-grid-carousel --save
Just import the Carousel
component from react-grid-carousel
and put your item into Carousel.Item
import React from 'react'
import Carousel from 'react-grid-carousel'
const Gallery = () => {
return (
<Carousel cols={2} rows={1} gap={10} loop>
<Carousel.Item>
<img width="100%" src="https://picsum.photos/800/600?random=1" />
</Carousel.Item>
<Carousel.Item>
<img width="100%" src="https://picsum.photos/800/600?random=2" />
</Carousel.Item>
<Carousel.Item>
<img width="100%" src="https://picsum.photos/800/600?random=3" />
</Carousel.Item>
<Carousel.Item>
{/* anything you want to show in the grid */}
</Carousel.Item>
{/* ... */}
</Carousel>
)
}
Prop | Type | Default | Description |
---|---|---|---|
cols | Number | 1 | Column amount rendered per page |
rows | Number | 1 | Row amount rendered per page |
gap | Number | String | 10 | Margin (grid-gap) for each item/grid in px or %, passed Number will turn to px unit |
loop | Boolean | false | Infinite loop or not |
scrollSnap | Boolean | true | true for applying scroll-snap to items on mobile |
hideArrow | Boolean | false | Show/hide the arrow prev/next buttons |
showDots | Boolean | false | Show dots indicate the current page on desktop mode |
autoplay | Number | Autoplay timeout in ms; undefined for autoplay disabled | |
dotColorActive | String | '#795548' | Valid css color value for active dot |
dotColorInactive | String | '#ccc' | Valid css color value for inactive dot |
responsiveLayout | Array | Customized cols & rows on different viewport size | |
mobileBreakpoint | Number | 767 | The breakpoint(px) to switch to default mobile layout |
arrowLeft | Element | Customized left arrow button | |
arrowRight | Element | Customized left arrow button | |
dot | Element | Customized dot component with prop isActive | |
containerStyle | Object | Style object for carousel container |
Array of layout settings for each breakbpoint
breakpoint
: Number; Requried; Equals to max-width
used in media query, in px unitcols
: Number; Column amount in specific breakpointrows
: Number; Row amount in specific breakpointgap
: Number | String; Gap size in specific breakpointloop
: Boolean; Infinite loop in specific breakpointautoplay
: Number; autoplay timeout(ms) in specific breakpoint; undefined
for autoplay disablede.g.
[
{
breakpoint: 800,
cols: 3,
rows: 1,
gap: 10,
loop: true,
autoplay: 1000
}
]
// your custom dot component with prop `isActive`
const MyDot = ({ isActive }) => (
<span
style={{
display: 'inline-block',
height: isActive ? '8px' : '5px',
width: isActive ? '8px' : '5px',
background: '#1890ff'
}}
></span>
)
// set custom dot
<Carousel dot={MyDot} />
Storybook (Don't forget to try on different viewport size)
$ git clone https://github.com/x3388638/react-grid-carousel
$ cd react-grid-carousel
$ npm ci
$ npm run storybook
Use case in real world
# clone & install packages
$ npm run dev
# open localhost:8080
or visit https://react-grid-carousel.now.sh/#use-case-in-real-world
MIT
FAQs
React resposive carousel component w/ grid layout
The npm package react-grid-carousel receives a total of 2,091 weekly downloads. As such, react-grid-carousel popularity was classified as popular.
We found that react-grid-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.