README improvement

README.md

@@ -1,4 +1,4 @@
-# React Drawarea
+# React DrawArea
 
 Simple package that provide React components to draw lines using mouse or touch events.
 
@@ -12,28 +12,43 @@ Simple package that provide React components to draw lines using mouse or touch
 
 ## Usage
 
+This package provides to your application `DrawArea` component and `DrawContext` context.
+
+`DrawArea` component can have several optional props:
+- **className**: To handle styles, simple. Default: `''`.
+- **color**: Color of lines. It can be an hex color or a named color. Default: `#000000`.
+- **disabled**: Prevent new lines to be drawed. It still shows existing lines. Default: `false`.
+- **hidden**: Hide whole component. Lines are still stored to be able to show them again until you unmount component or use reset feature. Default: `false`.
+- **thickness**: Lines thickness (in pixels). Default: `10`.
+
+`DrawArea` component can have also children components. This component will be able to access some features by using `useContext` hook and `DrawContext` (see samples below). Properties accesible by using this context are:
+- **lines**: An array of current lines. Each line is an array of points. Each point is an object containing properties `x` and `y`, both of them numbers.
+- **isDrawing**: A boolean which is `true` while a line is being drawn. Otherwise it is `false`.
+- **reset**: This method removes all lines when it is called.
+- **undo**: This method removes last drawed line when it is called.
+
 Keep in mind this component **has no styles**, so you should set at least its size to be able to use it. **You should handle this by providing a className and setting styles to it**. Same if you want to be able to draw over some other element or something special. **Be creative!** 😉
 
 ### Simple:
 ```javascript
 import * as React from 'react'
-import { DrawProvider } from 'react-drawarea'
+import { DrawArea } from 'react-drawarea'
 
-export const Sample = () => <DrawProvider className="drawarea" />
+export const Sample = () => <DrawArea className="drawarea" />
 ```
 
 ### With options:
 ```javascript
 import * as React from 'react'
-import { DrawProvider } from 'react-drawarea'
+import { DrawArea } from 'react-drawarea'
 
 export const Sample = () => {
   const [paused, setPaused] = React.useState(false)
   const [hidden, setHidden] = React.useState(false)
 
   return (
     <>
-      <DrawProvider
+      <DrawArea
         className="drawarea"
         color="#ba324f"
         disabled={paused}
@@ -50,7 +65,7 @@ export const Sample = () => {
 ### Reset and undo buttons:
 ```javascript
 import * as React from 'react'
-import { DrawContext, DrawProvider } from 'react-drawarea'
+import { DrawArea, DrawContext } from 'react-drawarea'
 
 const Buttons = () => {
   const { reset, undo } = React.useContext(DrawContext)
@@ -64,9 +79,9 @@ const Buttons = () => {
 }
 
 export const Sample = () => (
-  <DrawProvider className="drawarea">
+  <DrawArea className="drawarea">
     <img src="background.png" />
     <Buttons />
-  </DrawProvider>
+  </DrawArea>
 )
-```
+```