From 30863e13c007f347eaabdc01a282d3a66dacacf8 Mon Sep 17 00:00:00 2001
From: Guilherme Augusto <guilhermeasn@yahoo.com.br>
Date: Sun, 26 Nov 2023 10:44:09 -0300
Subject: [PATCH] added in readme sandbox examples

---
 README.md    | 25 ++++++++++++-------------
 package.json |  2 +-
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index 5e69b5f..ce21021 100644
--- a/README.md
+++ b/README.md
@@ -28,13 +28,13 @@ yarn add mask-hooks
 
 ## Examples with React
 
- - Custom Mask
+ - Custom Mask - [Sandbox](https://codesandbox.io/p/sandbox/amazing-sea-2m3m8j?file=%2Fsrc%2Fexamples%2FCustomMask.js)
 
 ```js
 import { useMask } from "mask-hooks";
 import { useState } from "react";
 
-export function InputMask() {
+export default function InputMask() {
 
     const mask = useMask({
         masks: [ 'R$ #,##' ],
@@ -61,7 +61,7 @@ export function InputMask() {
 }
 ```
 
- - Custom Mask with Numerical Range
+ - Custom Mask with Numerical Range - [Sandbox](https://codesandbox.io/p/sandbox/amazing-sea-2m3m8j?file=%2Fsrc%2Fexamples%2FCustomMaskNumericalRange.js)
 
 ```js
 import { useMask } from 'mask-hooks';
@@ -69,7 +69,7 @@ import { useMask } from 'mask-hooks';
 export default function Time() {
 
     const time = useMask({
-        masks: [ '[0-23]:[0-59]:[0-59]' ];
+        masks: [ '[0-23]:[0-59]:[0-59]' ]
     });
 
     return (
@@ -79,7 +79,7 @@ export default function Time() {
 }
 ```
 
- - Preset Mask
+ - Preset Mask - [Sandbox](https://codesandbox.io/p/sandbox/amazing-sea-2m3m8j?file=%2Fsrc%2Fexamples%2FPresetMask.js)
 
 ```js
 import { useMask, presets } from 'mask-hooks';
@@ -98,7 +98,7 @@ export default function MaskDocs() {
 }
 ```
 
- - Changed Preset Mask
+ - Changed Preset Mask - [Sandbox](https://codesandbox.io/p/sandbox/amazing-sea-2m3m8j?file=%2Fsrc%2Fexamples%2FChangedPresetMask.js)
 
 ```js
 import { useMask, getPresetMask } from 'mask-hooks';
@@ -113,19 +113,19 @@ export default function MaskProduct() {
                 productKeyMask('h3pbvfhb27rjtgh')
                 /* print H3PBV-FHB27-RJTGH-_____-_____ */
             }
-        <div>
+        </div>
     );
 
 }
 ```
 
- - Mask verification completed
+ - Mask verification completed - [Sandbox](https://codesandbox.io/p/sandbox/amazing-sea-2m3m8j?file=%2Fsrc%2Fexamples%2FMaskVerificationCompleted.js)
 
 ```js
 import { useCompleteMask, presets } from "mask-hooks";
 import { useState } from "react";
 
-export function InputMask() {
+export default function InputMask() {
 
     const maskComplete = useCompleteMask(presets.DATETIME_STAMP_LIMITED);
     const [ data, setData ] = useState(maskComplete(''));
@@ -144,13 +144,13 @@ export function InputMask() {
 }
 ```
 
- - Mask verification completed and tested
+ - Mask verification completed and tested - [Sandbox](https://codesandbox.io/p/sandbox/amazing-sea-2m3m8j?file=%2Fsrc%2Fexamples%2FMaskVerificationCompletedTested.js)
 
 ```js
 import { useCompleteMask, presets } from "mask-hooks";
 import { useState } from "react";
 
-export function InputMask() {
+export default function InputMask() {
 
     // When filling out the mask is completed a test function
     // is applied to check whether a valid date was entered,
@@ -174,7 +174,7 @@ export function InputMask() {
 }
 ```
 
-- use mask directly
+- use mask directly - [Sandbox](https://codesandbox.io/p/sandbox/amazing-sea-2m3m8j?file=%2Fsrc%2Fexamples%2FUseMaskDirectly.js)
 
 ```js
 import { applyMask, presets } from 'mask-hooks';
@@ -182,7 +182,6 @@ import { applyMask, presets } from 'mask-hooks';
 export default function maskColor(target) {
     return applyMask(target, presets.COLOR_HEX);
 }
-
 ```
 
 ## Resources
diff --git a/package.json b/package.json
index 338c949..f910307 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mask-hooks",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Lightweight package with functions and hooks for masking data inputs and outputs for Node.JS projects",
   "main": "dist/common/index.js",
   "module": "dist/module/index.js",