diff --git a/README.md b/README.md index d781d69..8935b5d 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,7 @@ A slideshow-style gallery component for use in React projects. - [Components and options](#components-and-options) - [Gallery](#gallery) - [GalleryMain](#gallerymain) + - [GalleryItem](#galleryitem) - [GalleryNav](#gallerynav) - [GalleryPagination](#gallerypagination) - [Accessibility](#accessibility) @@ -76,15 +77,17 @@ export const GALLERY_ITEMS = [ // your-gallery.js import { GALLERY_ITEMS } from "./some-data" -import { Gallery, GalleryMain, GalleryNav, GalleryPagination } from "@wethegit/react-gallery" +import { Gallery, GalleryMain, GalleryNav, GalleryPagination, GalleryItem } from "@wethegit/react-gallery" const YourGallery = () => { return ( ( - {item.alt} + renderGalleryItem={({ item, i, active }) => ( + + {item.alt} + )} /> @@ -106,7 +109,7 @@ export default YourGallery The first step is to give your data to the `` component via the `items` prop. At the very least, `items` is expected to be an Array. From there, you're free to arrange the child components this package provides as you see fit. Below is a brief description of each of the child components' usage. For a detailed breakdown of this component, jump ahead to the [Gallery](#gallery) section. -`` is the primary gallery view where your item data is rendered. It receives a render prop, `renderGalleryItem`, which exposes a few arguments you can use in the JSX you return: `item`, `i`, `activeIndex`, and `active`. For a detailed breakdown of this component, jump ahead to the [GalleryMain](#gallerymain) section. +`` is the primary gallery view where your item data is rendered. It receives a render prop, `renderGalleryItem`, which exposes a few arguments you can use in the JSX you return: `item`, `i`, `activeIndex`, and `active` and expects a `` to be returned. For a detailed breakdown of this component, jump ahead to the [GalleryMain](#gallerymain) section. We're using the `` component to define our "next" and "previous" buttons. These components receive a `direction` prop, which expects either a `1` or a `0`, and corresponds to the direction the gallery should move in when the button in question is clicked (where `0` maps to "previous", and `1` maps to "next"). For a detailed breakdown of this component, see the [GalleryNav](#gallerynav) section. @@ -178,7 +181,7 @@ The primary gallery body. Must be used within a ``. Renders an unordere #### `renderGalleryItem` -This render prop wraps its return value in a list item (`
  • `), and receives a handful of arguments: +This render prop expects a `` to be returned, and receives a handful of arguments: | Argument | Type | Description | | ----------- | ------- | -------------------------------------------------------------------------------------------------------------- | @@ -187,6 +190,17 @@ This render prop wraps its return value in a list item (`
  • `), and receives a | i | Number | The index of the current item being iterated over. | | item | Any | The current item being iterated over, as defined by the Array fed to the `` component's `items` prop. | +### <GalleryItem> +Required component that wraps each child inside the `renderGalleryitem` prop. Renders a list item (`
  • `) and can accept the following props: + +| Prop | Type | Description | +| ----------------- | -------- | --------------------------------------------------------------------------------------------------------------- | +| children | JSX | | +| className | String | | +| active | Boolean | Whether the current item being iterated over is the active item. | +| index | Number | The index of the currently active gallery item. | + + ### <GalleryNav> The navigational "next" and "previous" buttons. Must be used within a ``. You can render your buttons either by passing regular JSX children to them, or by using the `renderNavItem` render prop. diff --git a/package.json b/package.json index b5ab32b..3a6e737 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@wethegit/react-gallery", - "version": "1.0.3", + "version": "2.0.0", "description": "A customizable, accessible gallery component for React projects.", "files": [ "dist" diff --git a/src/lib/components/gallery-main.jsx b/src/lib/components/gallery-main.jsx index 702439f..9422592 100644 --- a/src/lib/components/gallery-main.jsx +++ b/src/lib/components/gallery-main.jsx @@ -5,9 +5,6 @@ import { useCallback } from "react" // hooks import { useGallery } from "../hooks/use-gallery" -// components -import { GalleryItem } from "./gallery-item" - // utils import classnames from "../utils/classnames" @@ -58,7 +55,7 @@ export const GalleryMain = ({ renderGalleryItem, className, ...props }) => { the user appears to want to scroll in (vertical or horizontal) */ if (Math.abs(yOffset) > 20) { - /* + /* if the user appears to be scrolling down ignore touch inputs */ setTouchState((d) => ({ ...d, scrolling: true })) @@ -93,9 +90,9 @@ export const GalleryMain = ({ renderGalleryItem, className, ...props }) => { if (!draggable) return if (touchState.isDragging) { - /* + /* check if the offset value is more than the swipeThreshold. - if it is then we'll move to the next or prev item in the gallery, + if it is then we'll move to the next or prev item in the gallery, otherwise it'll just spring back to the current position. */ if (Math.abs(touchState.xOffset) > swipeThreshold) { @@ -134,11 +131,7 @@ export const GalleryMain = ({ renderGalleryItem, className, ...props }) => { > {galleryItems.map((item, i) => { const active = activeIndex === i - return ( - - {renderGalleryItem({ item, i, activeIndex, active })} - - ) + return renderGalleryItem({ item, i, activeIndex, active }) })} ) diff --git a/src/lib/index.js b/src/lib/index.js index 9fa6f73..7110467 100644 --- a/src/lib/index.js +++ b/src/lib/index.js @@ -2,4 +2,5 @@ export { Gallery } from "./components/gallery-context" export { GalleryMain } from "./components/gallery-main" export { GalleryPagination } from "./components/gallery-pagination" export { GalleryNav } from "./components/gallery-nav" +export { GalleryItem } from "./components/gallery-item" export { useGallery } from "./hooks/use-gallery" diff --git a/src/main.jsx b/src/main.jsx index 111ec38..8f37bc0 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,6 +1,13 @@ import React from "react" import ReactDOM from "react-dom" -import { Gallery, GalleryMain, GalleryNav, GalleryPagination, useGallery } from "./lib" +import { + Gallery, + GalleryMain, + GalleryItem, + GalleryNav, + GalleryPagination, + useGallery, +} from "./lib" export const GALLERY_ITEMS = [ { @@ -44,7 +51,11 @@ function App() { return ( {item.alt}} + renderGalleryItem={({ item, i, active }) => ( + + {item.alt} + + )} /> ⬅️