nerdyman / react-image-turntable

Display a set of images as a draggable 360 degree turntable.

👋 Heyo, I'm Ricky

Full-stack developer and purveyor of niche React libraries.

react-image-turntable's Issues

Build module in ESM Format

• Bundle module in ESM format (no CJS - all supported browsers also support ESM)
• Add local demo of library to repo
• Publish alpha version of v3
• Add Codesandbox link using example folder in repo

Add hook to control all state from parent

Add useReactImageTurntable hook to expose internal functions to the parent component. This will allow the parent component to hook into the internal logic of the component, simplifying state management.

Props should be passed to the hook instead of directly to the component.

Example usage

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

const Example = () => {
  const turntableProps = useReactImageTurntable({ autoRotate: { interval: 200 } });

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

Add Basic Accessibility Features

• Element should be focusable and support keyboard navigation
• Each image should still append the current index to its alt tag
• Determine if there's an accessible (screen reader friendly) way to render the turntable

Npm package is corrupted

Hello @nerdyman. I was trying to install the new 3.1.0 version today and got the following error when trying to run the project EvalError: Code generation from strings disallowed for this context. dist/index.mjs file looks strange and contains strings with absolute paths like

var e="/Users/me/Documents/projects/nerdyman/react-image-turntable/src/hooks.ts"

When I run pnpm build I get completely different output that's not even close to the index.mjs file that I get when installing a package from npm.

NPM VERSION

PNPM OUTPUT

Generate Royalty-free Images to Demonstrate Usage

Demo currently uses proprietary rendered images to showcase usage.

Some potential models:

• https://www.blenderkit.com/asset-gallery-detail/58fd7c01-c395-4bc2-943b-48dbc4a11498/
• https://www.cgtrader.com/free-3d-models/car/concept-car/cyberpunk-flying-car-delorean
• https://www.cgtrader.com/free-3d-models/car/sport-car/porsche-911-turbo-5090a18b-5503-4ae6-a84e-5631648661fd
• https://www.cgtrader.com/free-3d-models/vehicle/other/1964-plymouth-belvede
• https://www.cgtrader.com/free-3d-print-models/games-toys/toys/piggy-van
• https://www.cgtrader.com/free-3d-models/car/sport-car/enzo-ferrari
• https://www.cgtrader.com/free-3d-models/car/suv/taxi-us-city
• https://www.cgtrader.com/free-3d-models/car/sport-car/supra-mk4-3d-model
• https://www.cgtrader.com/free-3d-models/car/sport-car/ford-mustan-gt1967

---

• Use royalty-free Blender model to generate turntable images
• Add static folder to repo with rendered images and source files

The first image provided to the turntable always displays

The first image inside of the images passed to the turntable always displays for me on 3.0.0

Add `use client` directive to module

Type information can not be found

When building the package the declaration file dist/index.d.mts is created. However package.json states "typings": "dist/index.d.ts" (code). Because of this mismatch (.mts vs .ts) TypeScript fails to find the type information and gives the error Cannot find module 'react-image-turntable' or its corresponding type declarations.

Add `np` to handle publishing

Add np to handle publishing of npm module and GitHub releases.

Add tests

Replace existing Jest tests with E2E tests using Playwright.

• Replace Jest with E2E tests
• Generate coverage and upload to Code Climate

Forward props and simplify logic

Current implementation only allows images prop. We should allow ref forwarding and spreading of any props supported by a div element to make it easy to customise and extend.

• Spread all props
• Simplify inner hook logic to use event listeners with minimal state updates

Add `autorotate.disableOnInteraction`

Add autorotate.disableOnInteraction property which defaults to true to automatically set autorotate.disabled: true when slider is interacted with using the keyboard or pointer.

This should override the maxStepCount prop in #27

Needs #24

Local example build increments twice on `pointermove` and `keydown`

The local example repo increments twice when dragging or using keyboard nav but the production build is fine.

Probably related to strict mode changes in React 18 https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-strict-mode

Pointer movement is inconsistent on touch devices

Pointer movement is buggy and sometimes doesn't fire at all on mobile/touch devices.

• Works on Android Firefox
• Works on Android Chrome - 06371f9
• Works on iOS Safari
• Works on iOS Chrome

Replace np with release it

np doesn't work well with pnpm, use release it instead.

https://github.com/release-it/release-it

Add `autoRotate.counterClockwise` prop

Add autoRotate.counterClockwise to control which way the turntable autorotates. Defaults to false or undefined.

Expose `movementSensitivity` as a prop

The movement sensitivity is currently hardcoded to 20, however it may be useful for this to be configured by the user.

• Expose movementSensitivity as a prop and pass it to the hook
• Default movementSensitivity value to 20

Add `autorotate.maxSteps` prop

Add autorotate.maxSteps to set a maximum number of times to automatically rotate the turntable.

Relates to #23 #24

Cleanly add and remove pointer events

Mousing down within the container and moving cursor outside of the container stops dragging, mousing over the container after the pointer up event has outside of the container causes the turntable to follow the mouse even though the mouse is no longer down.

• Add ability to drag outside of container with mouse down and continue dragging
• Disconnect drag event when pointer up fires outside of container