Release 4.0.0-0

npm install react-image-turntable@next
pnpm install react-image-turntable@next
yarn add react-image-turntable@next

import { ReactImageTurntable, useReactImageTurntable } from 'react-image-turntable';

const images = ['https://placehold.co/600x400?text=1', 'https://placehold.co/600x400?text=2', /*...*/];

const Example = () => {
  const turntableProps = useReactImageTurntable({
    autoRotate,               // Optional
    initialImageIndex: 0,     // Optional
    images,                   // Required
    movementSensitivity,      // Optional
    onIndexChange,            // Optional
  });

  return <ReactImageTurntable {...turntableProps} />;
}

Features

• Turntable is now controllable from the parent via the useReactImageTurntable hook, closes #24
• Adds autoRotate.counterClockwise prop to reverse the autorotation direction
• Right clicking the turntable now shows the active image, closes #35

Breaking Changes

• useReactImageTurntable hook is required to use the turntable

Bug Fixes

• Allow touch devices to scroll past the slider, closes #36
• Automatically set activeImageIndex images.length when images length changes

Build Changes

• use client added to all modules, closes #25
• .cjs modules are now published to work with non-esm libararies

Changelog

• chore: update package.json formatting (ff51b3f)
• build: bump publint and attw, only check node16 for attw (63121bc)
• build(example): use glob for lib package version (6206471)
• build: bump deps (8eeb330)
• ci: add step to check package (b881ec6)
• ci: update publish package job (cb61e4d)
• chore: update contrib guide (1be99ed)
• build: don't minify the lib build when the ANALYZE environment veriable is set to ensure coverage report is consistent (388d504)
• ci: add esbuild bundle action (672eaf6)
• ci: add test summary step (51c41ec)
• ci: update compressed size action for the last time hopefully (33775c9)
• ci: update compressed action scripts (e9f32c7)
• ci: add install script to compressed size action (dae60b6)
• ci: update working directory of compressed size action (52c0249)
• ci: remove install script from compressed size action (ecbe677)
• ci: set wd for coverage action (91f5a38)
• ci: copy src folder for coverage upload again again again (526c985)
• ci: copy src folder for coverage upload again again (ae9994e)
• ci: copy src folder for coverage upload again (edfd1bd)
• ci: copy src folder for coverage upload (3a201f1)
• chore: remove eslint tsconfig (4d26d8c)
• ci: bump codeclimate action (cf627c4)
• test: update target browsers (cf5470a)
• ci: run build before tests (b513cae)
• build: update setup script in example (a877d27)
• build: make bootstrap script work with npm (d194a58)
• dx: do not error when biome doesn't find any matching files in pre-commit (176984b)
• ci: add publish preview workflow (a18856f)
• feat: make current image clickable, closes #35 (30097c2)
• fix: use pan-y instead of none to allow scrolling on touch devices, closes #36 (5744d62)
• build: bump pnpm version (3ab9ddd)
• style: replace eslint and prettier with biome and run biome on whole repo (d4ac3a8)
• test: update playwright tests and reporters, move tests to example folder (33a066d)
• test: move tests into example folder and add granular interactivity tests (3c12712)
• refactor: merge with dev, fix conflicts (b92e6fb)
• build(deps): force repo to resolve react-image-turntable to workspace version, not npm (20d2201)
• test: fix hanging promises (ad40df3)
• style: enable stricter eslint settings to catch handing promises (97ac38d)
• docs(example): make buttons and inputs consistently space numbers to avoid jitter when changing between 18 and 36 images (166659e)
• refactor: wrap turntable in forwardRef and rename turntableRef from useReactImageTurntable to ref (528f5cf)
• docs: update readme (0ba7999)
• style: update eslint (5ae16a3)
• docs: add controls to example and add advanced/basic demos (6fc22c7)
• refactor: move autorotate timeout handler inside effect and reset active index to zero when image count changes to a length below the active index (d5cc07e)
• build: bump deps and remove lib scripts from package.json (e2a5f05)
• chore: merge with main, fix conflicts (e56ea8b)
• build: update build config and deps (93e77ea)
• refactor: move main code to lib, only build esm and replace np with release it, closes #25 #26 (f1cfacb)
• chore: use latest in example to avoid issues when it's used in isolation (5e11d09)
• fix: automatically set activeImageIndex images.length when images length changes (204d4f6)
• style: update linter to forbid any unused vars except prefixed ones (71a27bd)
• feat: make turntable completely controllable from the parent element, closes #24 (f43b532)

Full Changelog: v3.1.2...v4.0.0-0

v3.1.2

• fix(types): use correct path in package.json to types file (82a4e92) closes #32

Release 3.1.1

3.1.0 was published with a borked build and has been deprecated on npm.

Fixes

• Publish production build of the package, thanks @webmarkyn for raising this, closes #30

v3.1.0

Features

• Add autoRotate prop - thanks @webmarkyn for adding this feature!

Fixes

• Only change index on left mouse click

All Changes

• build: add min engines bbfdfd5
• build: add clean script and skip tsc in example build 2889849
• ci: update coverage upload action ae30559
• feat: update hook to ignore events and rename props 7238297
• feat: add autorotate 3acd18b
• build: update playwright bootstrap script 4cb4c33
• chore: update readme badges 737b6ce
• ci: yeet compressed action script until pnpm/pnpm#6424 or preactjs/compressed-size-action#83 is resolved 5954648
• test: use custom runtime a8e8d87
• style: prettier stop changing things pls 745efcd
• ci: remove install steps from test, it's handled in bootstrap 9b8f9f7
• chore: reaplce pnpx with pnpm in pre-commit hook e14d411
• test: update tests to use consistent port number and ignore unused a11y rules 540de8b
• build(deps): replace pretty-quick with lint-staged 2f54fb9
• build: use latest node in nvm config 2a64a14
• build(deps): upgrade everything 🙏 dc2f3a0
• ci: use node 20 5f0c886
• chore: add funding 26eb5ed
• ci: run pipeline on pull requests and move compressed size job to main ci workflow 8a478f0
• chore: update readme formatting... again b6a872d
• chore: update readme formatting 4da1b4b
• Update README.md 3dd4176
• docs: update readme demo and ci links 8752897
• refactor: remove auto parent focus on drag start, it's not needed 391171e
• dx: run all tests on pre-commit 4ac9102
• fix: prevent native image dragging on firefox desktop bf204c2
• dx: update husky scripts 5330be9
• build(deps): upgrade dev and example deps 8ed3c20
• fix: only change index on mouse left click 67d3bf6

v3.0.2...v3.1.0

3.0.2

🐛 Bug Fixes

• fix: match signature of add event listener for keydown and pointerDown events, fixes #13 4f5681f

📄 Everything Else

• chore: add keywords to package.json 1822f0e
• style: allow unsed React imports (we still need it to support <18) and require type for type imports 3e13d19
• test: use playwright's beforeEach instead of a custom one 5817bb0
• test: use dev server for tests to catch mount/unmount bugs with React 18 strict mode #13 dc81f7b
• docs: update contrib guide 3976d94
• dx: move husky hooks to .husky folder 0493b6d
• refactor: move firstImage to main map since it's pretty much the same as other images now 8caddde

v3.0.1...v3.0.2

3.0.1

🐛 Bug Fixes

• fix: apply opacity conditionally to the first image f314d66

v3.0.0...v3.0.1

🥳 3.0.0

💥 Breaking Changes

• Built for ES2021 in ESM format only
• react and react-dom removed as dependencies (now peer dependencies)
• Main component exported as ReactImageTurntable
• Licence changed to MIT

✨ Features

• Component is now intrinsically sized based on the width and height of the first image in images[]
• Component now accepts all valid div element props
• Added initialImageIndex prop to set initial image to show
• Added movementSensitivity prop to change how often images should change when dragging
• Added className properties to internal elements - exported with CLASS_NAME_IMG, CLASS_NAME_IMG_PRIMARY and CLASS_NAME_IMG_SECONDARY (see docs for more info)
• Added keyboard navigation
• Added accessibility features for screen readers
• Reduced bundle size