Skip to content

Commit 2b1c15e

Browse files
committed
add basic examples
1 parent 594aea9 commit 2b1c15e

24 files changed

+417
-28
lines changed

examples/basic-with-apply/README.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Basic with apply button
2+
3+
This example is the same as the basic example, but it adds a button to apply the focal point changes to the image.
4+
5+
<img
6+
src="https://developer.stackblitz.com/img/open_in_stackblitz.svg"
7+
alt="Edit on StackBlitz"
8+
title="Edit on StackBlitz"
9+
height="36"
10+
href="https://stackblitz.com/github/Lemoncode/react-image-focal-point/tree/master/examples/basic-with-apply"
11+
/> <img
12+
src="https://codesandbox.io/static/img/play-codesandbox.svg"
13+
alt="Edit on StackBlitz"
14+
title="Edit on StackBlitz"
15+
height="36"
16+
href="https://codesandbox.io/s/github/Lemoncode/react-image-focal-point/tree/master/examples/basic-with-apply"
17+
/>

examples/basic-with-apply/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>Basic with apply button</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/index.tsx"></script>
12+
</body>
13+
</html>
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "basic-with-apply-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/examples#readme",
12+
"devDependencies": {
13+
"@lemoncode/tsconfig": "^0.0.0",
14+
"@types/react": "^18.0.27",
15+
"@types/react-dom": "^18.0.10",
16+
"@vitejs/plugin-react": "^3.1.0",
17+
"typescript": "^4.9.5",
18+
"vite": "^4.1.1"
19+
},
20+
"dependencies": {
21+
"@lemoncode/react-image-focal-point": "^0.0.0",
22+
"react": "^18.2.0",
23+
"react-dom": "^18.2.0"
24+
}
25+
}
2.21 MB
Loading

examples/basic-with-apply/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>();
10+
return (
11+
<Playground src={IMAGE_URL} focalPoint={focalPoint}>
12+
<ImageFocalPoint src={IMAGE_URL} onChange={setFocalPoint} />
13+
</Playground>
14+
);
15+
};
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 />);
Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
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+
display: flex;
26+
flex-direction: column;
27+
gap: 1rem;
28+
align-items: flex-end;
29+
}
30+
31+
.submit-button {
32+
cursor: pointer;
33+
padding: 0.5rem 1rem;
34+
border-radius: 4px;
35+
border-style: none;
36+
box-sizing: border-box;
37+
min-width: 100px;
38+
background-color: #a3c769;
39+
font-size: 14px;
40+
}
41+
42+
.submit-button:hover {
43+
background-color: #8ebc5a;
44+
}
45+
46+
.submit-button:active {
47+
transform: scale(0.95);
48+
}
49+
50+
.result-subtitle {
51+
grid-area: result-subtitle;
52+
}
53+
54+
.result {
55+
grid-area: result;
56+
display: flex;
57+
flex-direction: column;
58+
flex-wrap: wrap;
59+
gap: 1rem;
60+
width: 100%;
61+
height: 100%;
62+
max-width: 40vw;
63+
}
64+
65+
.portrait-image {
66+
width: 100%;
67+
height: 100%;
68+
object-fit: cover;
69+
max-width: 300px;
70+
}
71+
72+
.landscape-image {
73+
width: 100%;
74+
height: 100%;
75+
object-fit: cover;
76+
max-height: 300px;
77+
}
78+
79+
.square-image {
80+
grid-area: square;
81+
object-fit: cover;
82+
width: 300px;
83+
height: 300px;
84+
}
Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from 'react';
2+
import { FocalPoint } from '@lemoncode/react-image-focal-point';
3+
import classes from './playground.module.css';
4+
5+
interface Props {
6+
src: string;
7+
focalPoint?: FocalPoint;
8+
children: React.ReactNode;
9+
}
10+
11+
export const Playground: React.FC<Props> = props => {
12+
const { src, children } = props;
13+
const [focalPoint, setFocalPoint] = React.useState<FocalPoint>();
14+
15+
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
16+
event.preventDefault();
17+
if (props.focalPoint) {
18+
setFocalPoint(props.focalPoint);
19+
}
20+
};
21+
22+
return (
23+
<div className={classes.root}>
24+
<h2 className={classes.focalPointSubtitle}>Image focal point</h2>
25+
<form className={classes.focalPoint} onSubmit={handleSubmit}>
26+
{children}
27+
<button className={classes.submitButton} type="submit">
28+
Apply
29+
</button>
30+
</form>
31+
32+
<h2 className={classes.resultSubtitle}>Example results</h2>
33+
<div className={classes.result}>
34+
<img
35+
src={src}
36+
className={classes.portraitImage}
37+
style={{ objectPosition: `${focalPoint?.x}% ${focalPoint?.y}%` }}
38+
/>
39+
<img
40+
src={src}
41+
className={classes.landscapeImage}
42+
style={{ objectPosition: `${focalPoint?.x}% ${focalPoint?.y}%` }}
43+
/>
44+
<img
45+
src={src}
46+
className={classes.squareImage}
47+
style={{ objectPosition: `${focalPoint?.x}% ${focalPoint?.y}%` }}
48+
/>
49+
</div>
50+
</div>
51+
);
52+
};
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"extends": "@lemoncode/tsconfig/react.json",
3+
"include": ["src", "./vite-env.d.ts"],
4+
"exclude": ["node_modules"]
5+
}
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/// <reference types="vite/client" />
2+
3+
// Reference: https://github.com/vitejs/vite/discussions/6799

0 commit comments

Comments
 (0)