@cjboco/cj-image-flip-previewer 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -7
- package/package.json +9 -1
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# cj-image-flip-previewer
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/@cjboco/cj-image-flip-previewer)
|
|
4
|
+
[](https://github.com/cjboco/cj-image-flip-previewer/blob/master/LICENSE)
|
|
5
5
|
[](https://cjboco.github.io/cj-image-flip-previewer/)
|
|
6
6
|
|
|
7
7
|
A React component for interactive image previews. Zero dependencies beyond React 19+.
|
|
@@ -15,7 +15,7 @@ One component, two modes:
|
|
|
15
15
|
## Install
|
|
16
16
|
|
|
17
17
|
```bash
|
|
18
|
-
npm install cj-image-flip-previewer
|
|
18
|
+
npm install @cjboco/cj-image-flip-previewer
|
|
19
19
|
```
|
|
20
20
|
|
|
21
21
|
## Setup
|
|
@@ -23,7 +23,7 @@ npm install cj-image-flip-previewer
|
|
|
23
23
|
Import the stylesheet once in your app (e.g., in your root layout or entry file):
|
|
24
24
|
|
|
25
25
|
```tsx
|
|
26
|
-
import "cj-image-flip-previewer/styles.css";
|
|
26
|
+
import "@cjboco/cj-image-flip-previewer/styles.css";
|
|
27
27
|
```
|
|
28
28
|
|
|
29
29
|
---
|
|
@@ -33,7 +33,7 @@ import "cj-image-flip-previewer/styles.css";
|
|
|
33
33
|
Image changes based on where the mouse is horizontally within the container. Move left-to-right to cycle through all images.
|
|
34
34
|
|
|
35
35
|
```tsx
|
|
36
|
-
import { FlipPreviewer } from "cj-image-flip-previewer";
|
|
36
|
+
import { FlipPreviewer } from "@cjboco/cj-image-flip-previewer";
|
|
37
37
|
|
|
38
38
|
<FlipPreviewer
|
|
39
39
|
width={320}
|
|
@@ -108,7 +108,7 @@ Use a ref to programmatically start and pause the animation:
|
|
|
108
108
|
|
|
109
109
|
```tsx
|
|
110
110
|
import { useRef } from "react";
|
|
111
|
-
import { FlipPreviewer, type FlipPreviewerRef } from "cj-image-flip-previewer";
|
|
111
|
+
import { FlipPreviewer, type FlipPreviewerRef } from "@cjboco/cj-image-flip-previewer";
|
|
112
112
|
|
|
113
113
|
function ControlledPreviewer() {
|
|
114
114
|
const ref = useRef<FlipPreviewerRef>(null);
|
|
@@ -181,7 +181,7 @@ function ControlledPreviewer() {
|
|
|
181
181
|
The included stylesheet uses `@layer components`, which works both as standalone CSS and with Tailwind CSS v4+. Import it once in your app:
|
|
182
182
|
|
|
183
183
|
```tsx
|
|
184
|
-
import "cj-image-flip-previewer/styles.css";
|
|
184
|
+
import "@cjboco/cj-image-flip-previewer/styles.css";
|
|
185
185
|
```
|
|
186
186
|
|
|
187
187
|
### Using with Tailwind CSS
|
package/package.json
CHANGED
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cjboco/cj-image-flip-previewer",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "React components for interactive image previews — flip through images by mouse position (FlipPreviewer) or animate frames on hover like a video previewer (VideoPreviewer).",
|
|
5
5
|
"author": "Doug Jones",
|
|
6
6
|
"license": "BSD-3-Clause",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "https://github.com/cjboco/cj-image-flip-previewer.git"
|
|
10
|
+
},
|
|
11
|
+
"homepage": "https://cjboco.github.io/cj-image-flip-previewer/",
|
|
12
|
+
"bugs": {
|
|
13
|
+
"url": "https://github.com/cjboco/cj-image-flip-previewer/issues"
|
|
14
|
+
},
|
|
7
15
|
"keywords": [
|
|
8
16
|
"react",
|
|
9
17
|
"image",
|