apply feedback

Author: nasdan

docs/api/focal-point.mdx

@@ -2,11 +2,11 @@
 title: FocalPoint
 ---
 
-The `FocalPoint` is the TypeScript interface that represents the focal point X and Y coordinates in percentage.
+The `FocalPoint` is a TypeScript interface that represents the X and Y coordinates of the focal point in percent.
 
 :::note
 
-You can see the default value in [Props section](image-focal-point/#props).
+You can check the default value in [Props section](image-focal-point/#props).
 
 :::
 

docs/api/image-focal-point-props.mdx

@@ -6,7 +6,7 @@ The `ImageFocalPointProps` is the TypeScript interface used by the [ImageFocalPo
 
 :::note
 
-You can see the default values in [Props section](image-focal-point/#props).
+You can check the default values in [Props section](image-focal-point/#props).
 
 :::
 
@@ -26,7 +26,7 @@ export interface ImageFocalPointProps {
 
 ## Example of use
 
-The intention of exporting this interface is to be able to use it in other components, for example as a wrapper. The following example shows how to use the `ImageFocalPointProps` interface in a TypeScript project.
+The goal of exporting this interface is to be able to use it in other components, for example as a wrapper. The following example shows how to use the `ImageFocalPointProps` interface in a TypeScript project.
 
 ```tsx title="wrapper.tsx" showLineNumbers
 import React from 'react';

docs/api/image-focal-point.mdx

@@ -2,7 +2,7 @@
 title: ImageFocalPoint (Component)
 ---
 
-The ImageFocalPoint component is the main file of the library. It is a wrapper of the HTML image element that allows you to drag and drop the focal point button on the image.
+The ImageFocalPoint component is the main file of the library. It is a wrapper of the HTML image element that allows you to drag and drop a focal point button on top of the image element.
 
 ## Internal HTML structure
 

docs/examples/basic-with-apply.mdx

@@ -5,7 +5,7 @@ title: Basic example, apply button
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-This example is quite similar to the [basic example](basic), but instead of applying the changes real time, the user has to click on an 'apply' button to see the updates reflected.
+This example is quite similar to the [basic example](basic), but instead of applying the changes in real time, the user has to click on an 'apply' button to see the updates reflected.
 
 ## Live example
 

docs/examples/basic.mdx

@@ -5,7 +5,7 @@ title: Basic
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-Minimum example, here you can just drag the focal point and the example pictures focal point will be updated on real time.
+Minimal example, here you can just drag the focal point and the example pictures focal point will be updated on real time.
 
 ## How to apply this feature in your code
 
@@ -37,7 +37,7 @@ const App = () => {
     <ImageFocalPoint
       src="your-image-src"
       onChange={focalPoint => {
-        // Whatever you want to do when the user clicks on the image
+        // Add here your code to do whatever you want to when the user drags on the focal point
       }}
     />
     // highlight-end

docs/examples/controlled.mdx

@@ -23,7 +23,7 @@ const App = () => {
     <ImageFocalPoint
       src="your-image-src"
       onChange={newFocalPoint => {
-        // Whatever you want to do when the user clicks on the image
+        // Add here your code to do whatever you want to when the user drags on the focal point
       }}
     />
     // highlight-end

docs/examples/styled.mdx

@@ -5,7 +5,7 @@ title: Styled
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-This example shows how to provide styles to the image focal point component.
+This example shows how to override the standard component styles with your custom ones and apply them to the image focal point component.
 
 ## How to apply this feature in your code
 
@@ -20,7 +20,7 @@ const App = () => {
     <ImageFocalPoint
       src="your-image-src"
       onChange={newFocalPoint => {
-        // Whatever you want to do when the user clicks on the image
+        // Add here your code to do whatever you want to when the user drags on the focal point
       }}
     />
   );
@@ -51,7 +51,7 @@ const App = () => {
 +      className="image-focal-point"
        src="your-image-src"
        onChange={(newFocalPoint) => {
-         // Whatever you want to do when the user clicks on the image
+         // Add here your code to do whatever you want to when the user drags on the focal point
        }}
      />
   );
@@ -97,7 +97,7 @@ const App = () => {
 +      }}
        src="your-image-src"
        onChange={(newFocalPoint) => {
-         // Whatever you want to do when the user clicks on the image
+         // Add here your code to do whatever you want to when the user drags on the focal point
        }}
      />
   );

docs/examples/webpack-entry-point.mdx

@@ -5,7 +5,7 @@ title: Webpack entry point
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-This example is the same as the [basic example](basic), but using the webpack entry point to import the library styles.
+This example is the same as the [basic example](basic), but using webpack entry point in order to import the library (you can use the entry section of your _webpack.config.js_ and add there the path to the library css file instead of having to add it in your main HTML / JS file in your app.
 
 ## How to apply this feature in your code
 
@@ -20,7 +20,7 @@ const App = () => {
     <ImageFocalPoint
       src="your-image-src"
       onChange={newFocalPoint => {
-        // Whatever you want to do when the user clicks on the image
+        // Add here your code to do whatever you want to when the user drags on the focal point
       }}
     />
   );

docs/getting-started.mdx

@@ -45,7 +45,7 @@ const App = () => {
     <ImageFocalPoint
       src="your-image-src" // Same src as <img> HTML element
       onChange={focalPoint => {
-        // Whatever you want to do when the user clicks on the image
+        // Add here your code to do whatever you want to when the user drags on the focal point
       }}
     />
     // highlight-end
@@ -80,7 +80,7 @@ const App = () => {
     <ImageFocalPoint
       src="your-image-src" // Same src as <img> HTML element
       onChange={focalPoint => {
-        // Whatever you want to do when the user clicks on the image
+        // Add here your code to do whatever you want to when the user drags on the focal point
       }}
     />
   );

examples/basic-with-apply/README.md

@@ -1,6 +1,6 @@
 # Basic example, apply button
 
-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.
+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 in real time, the user has to click on an 'apply' button to see the updates reflected.
 
 <a target="_blank" href="https://stackblitz.com/github/Lemoncode/react-image-focal-point/tree/main/examples/basic-with-apply">
   <img