Adding documentation

README.md

@@ -1,2 +1,111 @@
-# react-image-marker
-It allows to be able to set markers on an image
+<p align="center">
+  <img src="https://firebasestorage.googleapis.com/v0/b/heroes-49297.appspot.com/o/react-image-marker-01.png?alt=media&token=801dd48d-28c4-4795-9695-b89049f034cb">
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/react-image-marker" target="_blank">
+    <img src="https://badgen.net/npm/v/react-image-marker" alt="">
+  </a>
+  <a href="LICENSE.md" target="_blank">
+    <img src="https://badgen.net/badge/license/MIT/blue" alt="">
+  </a>
+  <a href="https://www.npmjs.com/package/react-image-marker" target="_blank">
+    <img src="https://badgen.net/npm/dt/react-image-marker" alt="">
+  </a>
+</p>
+
+`react-image-marker` makes it easy to add markers and tags to any image.
+
+## Why ?
+
+Adding markers to images seems something really simple, isn't it? You just need to do some hacks with CSS to position your marker where it was clicked and it is done, right? NO!
+
+There is a bunch of edge cases that need to be addressed:
+
+-   When the screen size is changed, the markers need to keep the same reference.
+-   When the image is half shown on the screen (let's suppose the user has scrolled down), clicking on the image should position the marker correctly.
+-   Much more.
+
+## Install
+
+Install with [npm](https://www.npmjs.com/), or [Yarn](https://yarnpkg.com/):
+
+```bash
+# via npm
+npm install react-image-marker
+
+# or Yarn (note that it will automatically save the package to your `dependencies` in `package.json`)
+yarn add react-image-marker
+```
+
+## Usage
+
+First, you will need to import the `ImageMarker`. If you are using `typescript` on your project you can also import the type `Marker`.
+
+```js
+// import the dependencies
+import ImageMarker, { Marker } from 'react-image-marker';
+```
+
+Now you will need to provide an array of `Markers`. In this example, we are storing them with `useState`. `top` and `left` are numbers that represent the PERCENTAGE the marker is positioned in relation to the image size.
+
+```js
+//Define the markers
+const [markers, setMarkers] =
+    useState <
+    Array <
+    Marker >>
+        [
+            {
+                top: 10, //10% of the image relative size from top
+                left: 50, //50% of the image relative size from left
+            },
+        ];
+```
+
+Now you just need to use the `ImageMarker` to render your markers
+
+```js
+<ImageMarker
+    src="my-image-path"
+    markers={markers}
+    onAddMarker={(marker: Marker) => setMarkers([...markers, marker])}
+/>
+```
+
+It is going to render something like this
+
+<p align="center">
+  <img src="https://firebasestorage.googleapis.com/v0/b/heroes-49297.appspot.com/o/react-image-marker-default.gif?alt=media&token=f13ba5b8-eabc-4ded-8bed-9016b0bbd2e5">
+</p>
+
+## Usage - Custom Markers
+
+You can also use a custom marker if you want.
+First, you will need to create a custom marker component.
+
+```js
+// import the dependencies
+import ImageMarker, { Marker, MarkerComponentProps } from 'react-image-marker';
+
+const CustomMarker = (props: MarkerComponentProps) => {
+    return (
+        <p className="custom-marker">My custom marker - {props.itemNumber}</p>
+    );
+};
+```
+
+Now you just need to pass it through the prop `markerComponent`
+
+```js
+<ImageMarker
+    src="my-image-path"
+    markers={markers}
+    onAddMarker={(marker: Marker) => setMarkers([...markers, marker])}
+    markerComponent={CustomMarker}
+/>
+```
+
+<p align="center">
+  <img src="https://firebasestorage.googleapis.com/v0/b/heroes-49297.appspot.com/o/react-image-marker-custom-marker.gif?alt=media&token=9cad6f01-d982-41f9-8401-d69d826618bd">
+</p>

example/README.md

@@ -1,44 +1,31 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+## TypeScript example
 
-## Available Scripts
+To run this example locally you just need a new steps:
 
-In the project directory, you can run:
+## Install
 
-### `yarn start`
+Install with [npm](https://www.npmjs.com/), or [Yarn](https://yarnpkg.com/):
 
-Runs the app in the development mode.<br />
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+```bash
+# via npm
+npm install
 
-The page will reload if you make edits.<br />
-You will also see any lint errors in the console.
+# or Yarn
+yarn install
+```
 
-### `yarn test`
+## Start
 
-Launches the test runner in the interactive watch mode.<br />
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+```bash
+# via npm
+npm start
 
-### `yarn build`
+# or Yarn
+yarn start
+```
 
-Builds the app for production to the `build` folder.<br />
-It correctly bundles React in production mode and optimizes the build for the best performance.
+It should be running at `http://localhost:3000/`:
 
-The build is minified and the filenames include the hashes.<br />
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `yarn eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
+<p align="center">
+  <img src="https://firebasestorage.googleapis.com/v0/b/heroes-49297.appspot.com/o/react-image-marker-custom-marker.gif?alt=media&token=9cad6f01-d982-41f9-8401-d69d826618bd">
+</p>

example/src/App.tsx

@@ -8,7 +8,11 @@ function App() {
         { top: 10, left: 50 },
     ]);
     const CustomMarker = (props: MarkerComponentProps) => {
-        return <p className="custom-marker">Coooool - {props.itemNumber}</p>;
+        return (
+            <p className="custom-marker">
+                My custom marker - {props.itemNumber}
+            </p>
+        );
     };
     return (
         <div className="App">