Skip to content

Commit 24b17c9

Browse files
nasdannasdan
committed
add controlled example
1 parent 8cb90ee commit 24b17c9

File tree

16 files changed

+328
-67
lines changed

16 files changed

+328
-67
lines changed

‎examples/basic-with-apply/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"url": "git+https://github.com/Lemoncode/react-image-focal-point.git"
99
},
1010
"author": "Lemoncode",
11-
"homepage": "https://github.com/Lemoncode/react-image-focal-point/tree/main/examples#readme",
11+
"homepage": "https://github.com/Lemoncode/react-image-focal-point/tree/main/#readme",
1212
"devDependencies": {
1313
"@types/react": "^18.0.27",
1414
"@types/react-dom": "^18.0.10",

‎examples/basic/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const App = () => {
2828
return (
2929
+ <ImageFocalPoint
3030
+ src="your-image-src"
31-
+ onClick={() => {
31+
+ onClick={(focalPoint) => {
3232
+ // Whatever you want to do when the user clicks on the image
3333
+ }}
3434
+ />

‎examples/basic/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"url": "git+https://github.com/Lemoncode/react-image-focal-point.git"
99
},
1010
"author": "Lemoncode",
11-
"homepage": "https://github.com/Lemoncode/react-image-focal-point/tree/main/examples#readme",
11+
"homepage": "https://github.com/Lemoncode/react-image-focal-point/tree/main/#readme",
1212
"devDependencies": {
1313
"@types/react": "^18.0.27",
1414
"@types/react-dom": "^18.0.10",

‎examples/controlled/README.md

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
# Controlled
2+
3+
This example shows how to provide some initial focal point values.
4+
5+
## How to use
6+
7+
Import the library styles and the component. Use it with minimal properties:
8+
9+
```jsx
10+
import '@lemoncode/react-image-focal-point/style.css';
11+
import { ImageFocalPoint } from '@lemoncode/react-image-focal-point';
12+
13+
const App = () => {
14+
return (
15+
<ImageFocalPoint
16+
src="your-image-src"
17+
onClick={(newFocalPoint) => {
18+
// Whatever you want to do when the user clicks on the image
19+
}}
20+
/>
21+
);
22+
}
23+
24+
```
25+
26+
Create a state to provide the initial focal point values and store the new ones:
27+
28+
```diff
29+
import '@lemoncode/react-image-focal-point/style.css';
30+
import { ImageFocalPoint } from '@lemoncode/react-image-focal-point';
31+
32+
const App = () => {
33+
+ const [focalPoint, setFocalPoint] = useState({ x: 5, y: 10 });
34+
return (
35+
<ImageFocalPoint
36+
src="your-image-src"
37+
+ focalPoint={focalPoint}
38+
onClick={(newFocalPoint) => {
39+
+ setFocalPoint(newFocalPoint);
40+
}}
41+
/>
42+
);
43+
}
44+
45+
```
46+
47+
<a target="_blank" href="https://stackblitz.com/github/Lemoncode/react-image-focal-point/tree/main/examples/controlled">
48+
<img
49+
src="https://developer.stackblitz.com/img/open_in_stackblitz.svg"
50+
alt="Edit on StackBlitz"
51+
title="Edit on StackBlitz"
52+
height="36"
53+
/>
54+
</a> <a target="_blank" href="https://codesandbox.io/s/github/Lemoncode/react-image-focal-point/tree/main/examples/controlled">
55+
<img
56+
src="https://codesandbox.io/static/img/play-codesandbox.svg"
57+
alt="Edit on StackBlitz"
58+
title="Edit on StackBlitz"
59+
height="36"
60+
/>
61+
</a>
62+

‎examples/controlled/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Controlled</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/index.tsx"></script>
12+
</body>
13+
</html>

‎examples/controlled/package.json

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "controlled-example",
3+
"scripts": {
4+
"start": "vite --open"
5+
},
6+
"repository": {
7+
"type": "git",
8+
"url": "git+https://github.com/Lemoncode/react-image-focal-point.git"
9+
},
10+
"author": "Lemoncode",
11+
"homepage": "https://github.com/Lemoncode/react-image-focal-point/tree/main/#readme",
12+
"devDependencies": {
13+
"@types/react": "^18.0.27",
14+
"@types/react-dom": "^18.0.10",
15+
"@vitejs/plugin-react": "^3.1.0",
16+
"typescript": "^4.9.5",
17+
"vite": "^4.1.1"
18+
},
19+
"dependencies": {
20+
"@lemoncode/react-image-focal-point": "*",
21+
"react": "^18.2.0",
22+
"react-dom": "^18.2.0"
23+
}
24+
}

‎examples/controlled/public/landscape.jpg

2.21 MB
Loading

‎examples/controlled/src/app.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
import '@lemoncode/react-image-focal-point/style.css';
3+
import { ImageFocalPoint, FocalPoint } from '@lemoncode/react-image-focal-point';
4+
import { Playground } from './playground';
5+
6+
const IMAGE_URL = 'landscape.jpg';
7+
8+
export const App = () => {
9+
const [focalPoint, setFocalPoint] = React.useState<FocalPoint>({ x: 5, y: 10 });
10+
return (
11+
<Playground src={IMAGE_URL} focalPoint={focalPoint}>
12+
<ImageFocalPoint src={IMAGE_URL} focalPoint={focalPoint} onChange={setFocalPoint} />
13+
</Playground>
14+
);
15+
};

‎examples/controlled/src/index.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { createRoot } from 'react-dom/client';
2+
import { App } from './app';
3+
4+
const root = createRoot(document.getElementById('root')!);
5+
6+
root.render(<App />);

‎examples/controlled/src/playground.module.css

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
.root {
2+
display: grid;
3+
grid-template-areas:
4+
'focal-point-subtitle result-subtitle'
5+
'focal-point result';
6+
row-gap: 1rem;
7+
column-gap: 10rem;
8+
grid-template-columns: auto 1fr;
9+
}
10+
11+
h2 {
12+
font-family: Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
13+
margin: 0;
14+
font-size: 1.5rem;
15+
font-weight: bold;
16+
text-align: center;
17+
}
18+
19+
.focal-point-subtitle {
20+
grid-area: focal-point-subtitle;
21+
}
22+
23+
.focal-point {
24+
grid-area: focal-point;
25+
}
26+
27+
.result-subtitle {
28+
grid-area: result-subtitle;
29+
}
30+
31+
.result {
32+
grid-area: result;
33+
display: flex;
34+
flex-direction: column;
35+
flex-wrap: wrap;
36+
gap: 1rem;
37+
width: 100%;
38+
height: 100%;
39+
max-width: 40vw;
40+
}
41+
42+
.portrait-image {
43+
width: 100%;
44+
height: 100%;
45+
object-fit: cover;
46+
max-width: 300px;
47+
}
48+
49+
.landscape-image {
50+
width: 100%;
51+
height: 100%;
52+
object-fit: cover;
53+
max-height: 300px;
54+
}
55+
56+
.square-image {
57+
grid-area: square;
58+
object-fit: cover;
59+
width: 300px;
60+
height: 300px;
61+
}

0 commit comments

Comments
 (0)