@wethegit/react-gallery - npm Package Compare versions

Comparing version 0.0.0-beta.5 to 0.0.0

package.json

		{
		"name": "@wethegit/react-gallery",
		"version": "0.0.0-beta.5",
		"version": "0.0.0",
		"description": "A customizable, accessible gallery component for React projects.",
		@@ -5,0 +5,0 @@ "main": "dist/main.mjs",

README.md

		@@ -48,3 +48,3 @@ # @wethegit/react-gallery

		This is an optional step, but it's highly recommended to use the base styles as a starting point. The most straightforward way to do this is to import the stylesheet into your app directly from the `/node_modules/@wethegit/react-gallery/dist/` directory.
		This is an optional step, but it's highly recommended to use the base styles as a starting point. The most straightforward way to do this is to import the stylesheet into your app directly from the `/node_modules/@wethegit/react-gallery/dist/` directory, but you can do this in whichever way is preferable within your build system or framework.

		@@ -57,4 +57,2 @@ ```jsx

		💡 Using a custom Webpack setup, you can configure an `@import` resolver to allow for something like `@import "~@wethegit/react-gallery"` to be written directly in your app or component's stylesheet. Check out Webpack's [css-loader docs](https://webpack.js.org/loaders/css-loader/#import) for more information.

		### Create a simple Gallery
		@@ -64,3 +62,3 @@

		⚠️ Before continuing, make sure you have properly [imported the base stylesheet](#import-the-base-stylesheet) (if you intend to use it).
		⚠️ Before continuing, make sure you have properly [imported the base stylesheet](#import-the-base-stylesheet), if you intend to use it.

		@@ -118,3 +116,3 @@ <!-- prettier-ignore -->

		We're also using the `<GalleryPagination>` component here. If you're not familiar, "pagination" refers to what is often rendered as a set of "dots" below a gallery — but this can be _anything_. This component receives a render prop `renderPaginationItem`, 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 [GalleryPagination](#gallerypagination) section.
		We're also using the `<GalleryPagination>` component here. If you're not familiar, "pagination" refers to what is often rendered as a set of "dots" below a gallery — but this can be _anything_ (thumbnails, icons, and so on). This component receives the render prop, `renderPaginationItem`, 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 [GalleryPagination](#gallerypagination) section.

		@@ -198,3 +196,3 @@ ## Custom layouts

		The navigational "next" and "previous" buttons. Must be used within a `<Gallery>`. You can render your buttons either by passing regular JSX children them, or by using the `renderNavItem` render prop.
		The navigational "next" and "previous" buttons. Must be used within a `<Gallery>`. You can render your buttons either by passing regular JSX children to them, or by using the `renderNavItem` render prop.

		@@ -245,6 +243,34 @@ #### Props:

		That said, you must still code responsibly! Ensure that your gallery contents, nav buttons, and pagination items all have discernible text — whether that be image `alt` text, or [visually-hidden](https://css-tricks.com/inclusively-hidden/) text intended for screen readers.
		That said, you must still code responsibly! Ensure that your gallery contents, nav buttons, and pagination items all have discernible text — whether that be image `alt` text, or [visually-hidden](https://css-tricks.com/inclusively-hidden/) text intended for screen readers (the stylesheet included with the Gallery component inclues a CSS utility class for this: `.gallery-util-visually-hidden`).

		Regarding the ARIA-live text, check out the section on this gallery's [`ariaLiveText`](#arialivetext) prop.

		### Reduced motion

		For reduced motion implementations, you can detect the user's preference via the `matchMedia` API, and adjust the CSS custom property, `--duration` on the `.gallery` selector. Check out the example below, which adds a style tag to the gallery, and overrides the `--duration` property based on the preference. You could also do this via a conditional className, if you prefer. An alternative is be to pass this `prefersReducedMotion` value as a prop, which could be helpful if you use the Styled Components library.

		```jsx
		const YourGallery = () => {
		// Get the user's motion preference:
		const prefersReducedMotion = window.matchMedia(
		"(prefers-reduced-motion: reduce)"
		).matches

		// Create an inline style object
		const style = {
		"--duration": prefersReducedMotion ? "0s" : "0.5s",
		}

		return (
		// Pass the style overrides to the <Gallery> component
		<Gallery items={GALLERY_ITEMS} style={style}>
		<GalleryMain
		renderGalleryItem={({ item }) => <img src={item.image} alt={item.alt} />}
		/>
		// ...etc
		</Gallery>
		)
		}
		```

		## useGallery hook
		@@ -251,0 +277,0 @@

@wethegit/react-gallery - npm Package Compare versions

Improved metrics