Skip to content

Commit 0a39b93

Browse files
nasdannasdan
committed
apply feedback
1 parent a8772c5 commit 0a39b93

File tree

20 files changed

+2494
-2777
lines changed

20 files changed

+2494
-2777
lines changed

‎examples/basic-with-apply/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# Basic with apply button
1+
# Basic example, apply button
22

3-
This example is the same as the [basic example](https://github.com/Lemoncode/react-image-focal-point/tree/main/examples/basic), but it adds a button to apply the focal point changes to the image.
3+
This example is quite similar to the [basic example](https://github.com/Lemoncode/react-image-focal-point/tree/main/examples/basic), but instead of applying the changes real time, the user has to click on an 'apply' button to see the updates reflected.
44

55
<a target="_blank" href="https://stackblitz.com/github/Lemoncode/react-image-focal-point/tree/main/examples/basic-with-apply">
66
<img

‎examples/basic-with-apply/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" href="/favicon.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Basic with apply button</title>
7+
<title>Basic example, apply button</title>
88
</head>
99
<body>
1010
<div id="root"></div>

‎examples/basic-with-apply/src/playground.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@ export const Playground: React.FC<Props> = props => {
2121

2222
return (
2323
<div className={classes.root}>
24-
<h1 className={classes.title}>Basic with apply button</h1>
24+
<h1 className={classes.title}>Basic example, apply button</h1>
2525
<p className={classes.description}>
26-
This example is the same as the basic example, but it adds a button to apply the focal point changes to the
27-
image.
26+
In this example you can play changing the focal point by dragging it, and once you are done you can click on the
27+
apply button and it will reflected on the example pictures
2828
</p>
2929
<h2 className={classes.focalPointSubtitle}>Image focal point</h2>
3030
<form className={classes.focalPoint} onSubmit={handleSubmit}>

‎examples/basic/README.md

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
# Basic
22

3-
This example shows how to use the library with the minimal properties.
3+
Minimum example, here you can just drag the focal point and the example pictures focal point will be updated on real time.
44

5-
## How to use
5+
## How to apply this feature in your code
66

77
Import the library styles and the component:
88

@@ -52,4 +52,3 @@ const App = () => {
5252
height="36"
5353
/>
5454
</a>
55-

‎examples/basic/src/playground.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ export const Playground: React.FC<Props> = props => {
1515
<div className={classes.root}>
1616
<h1 className={classes.title}>Basic</h1>
1717
<p className={classes.description}>
18-
This example shows how to use the library with the minimal properties (<i>src</i> and <i>onChange</i>)
18+
Minimum example, here you can just drag the focal point and the example pictures focal point will be updated on
19+
real time.
1920
</p>
2021
<h2 className={classes.focalPointSubtitle}>Image focal point</h2>
2122
<div className={classes.focalPoint}>{children}</div>

‎examples/controlled/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
# Controlled
22

3-
This example shows how to provide some initial focal point values.
3+
In this example you can check how to set an initial focal point value (by default it is show centered, but you can override it).
44

5-
## How to use
5+
## How to apply this feature in your code
66

77
Import the library styles and the component. Use it with minimal properties:
88

‎examples/controlled/src/playground.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,10 @@ export const Playground: React.FC<Props> = props => {
1414
return (
1515
<div className={classes.root}>
1616
<h1 className={classes.title}>Controlled</h1>
17-
<p className={classes.description}>This example shows how to provide some initial focal point values.</p>
17+
<p className={classes.description}>
18+
In this example you can check how to set an initial focal point value (by default it is show centered, but you
19+
can override it).
20+
</p>
1821
<h2 className={classes.focalPointSubtitle}>Image focal point</h2>
1922
<div className={classes.focalPoint}>{children}</div>
2023

‎examples/styled/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
This example shows how to provide styles to the image focal point component.
44

5-
## How to use
5+
## How to apply this feature in your code
66

77
Import the library styles and the component. Use it with minimal properties:
88

@@ -56,7 +56,7 @@ const App = () => {
5656

5757
```
5858

59-
You can also provide styles to the image and the focal point:
59+
You can also customize the look & feel of the the image and the focal point by adding custom styles:
6060

6161
_app.css_
6262

0 commit comments

Comments
 (0)