Setup lint and prettier (#66)

* Fix lint

* Setup lint and prettier

Author: cham11ng

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.prettierrc

@@ -1,7 +1,7 @@
 {
   "semi": true,
   "tabWidth": 2,
-  "printWidth": 100,
+  "printWidth": 80,
   "singleQuote": true,
   "trailingComma": "none",
   "jsxBracketSameLine": true

.travis.yml

@@ -18,4 +18,4 @@ deploy:
   github_token: $github_token
   local_dir: example/build
   on:
-    branch: master
+    branch: main

README.md

@@ -16,9 +16,9 @@ yarn add react-copy-button
 
 ```jsx
 // Functional Component with useRef hook.
-import React from "react";
-import { useRef } from "react";
-import { useState } from "react";
+import React from 'react';
+import { useRef } from 'react';
+import { useState } from 'react';
 
 function App() {
   const imgRef = useRef();
@@ -35,9 +35,9 @@ function App() {
 }
 
 // Class Component
-import * as React from "react";
+import * as React from 'react';
 
-import CopyButton from "react-copy-button";
+import CopyButton from 'react-copy-button';
 
 class Example extends React.Component {
   constructor(props) {
@@ -60,6 +60,12 @@ class Example extends React.Component {
 }
 ```
 
+## Development
+
+```bash
+pnpm install
+```
+
 ## Browser compatibility
 
 For browser compatibility check [here](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand#Browser_compatibility).

example/src/App.js

@@ -1,16 +1,16 @@
-import React from "react";
-import { useRef } from "react";
-import { useState } from "react";
+import React from 'react';
+import { useRef } from 'react';
+import { useState } from 'react';
 
-import { CopyButton } from "react-copy-button";
+import { CopyButton } from 'react-copy-button';
 
 const TIMEOUT_DURATION = 1000;
 
 function App() {
   const imgRef = useRef();
   const [isTextCopied, setTextCopied] = useState(false);
   const [isImageCopied, setImageCopied] = useState(false);
-  const [copyValue, updateValues] = useState({ copy: "", image: "" });
+  const [copyValue, updateValues] = useState({ copy: '', image: '' });
 
   const handleChange = (event) =>
     updateValues({ ...copyValue, [event.target.name]: event.target.value });
@@ -46,7 +46,7 @@ function App() {
               text={copyValue.text}
               onClick={handleTextCopy}
             >
-              {isTextCopied ? "Text Copied!" : "Copy Text"}
+              {isTextCopied ? 'Text Copied!' : 'Copy Text'}
             </CopyButton>
             <hr />
             <input
@@ -56,12 +56,12 @@ function App() {
               placeholder="Paste image url here"
               onChange={handleChange}
             />
-            <div style={{ textAlign: "center", padding: 40 }} ref={imgRef}>
+            <div style={{ textAlign: 'center', padding: 40 }} ref={imgRef}>
               <img
                 height={400}
                 src={
                   copyValue.image ||
-                  "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/2000px-React-icon.svg.png"
+                  'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/2000px-React-icon.svg.png'
                 }
                 alt="React Copy Button"
               />
@@ -71,7 +71,7 @@ function App() {
               imgRef={imgRef}
               onClick={handleImageCopy}
             >
-              {isImageCopied ? "Image Copied!" : "Copy Image"}
+              {isImageCopied ? 'Image Copied!' : 'Copy Image'}
             </CopyButton>
           </div>
         </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-copy-button",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "homepage": "https://cham11ng.github.io/react-copy-button",
   "description": "Copy to clipboard react button component.",
   "author": "cham11ng",
@@ -16,13 +16,20 @@
   "scripts": {
     "build": "rollup -c",
     "start": "rollup -c -w",
-    "prepare": "yarn run build",
+    "prepare": "yarn run build && husky install",
     "predeploy": "cd example && yarn install && yarn run build",
     "deploy": "gh-pages -d example/build",
     "lint": "eslint .",
-    "lint:fix": "eslint --fix . --ext .ts,.tsx",
+    "lint:fix": "eslint --fix .",
     "prettify": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}'"
   },
+  "lint-staged": {
+    "*.{js,ts,jsx,tsx}": "eslint --fix",
+    "*.{js,ts,jsx,tsx,css,md,json}": "prettier --write"
+  },
+  "files": [
+    "dist"
+  ],
   "devDependencies": {
     "@rollup/plugin-commonjs": "^22.0.1",
     "@rollup/plugin-node-resolve": "^13.3.0",
@@ -36,14 +43,13 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.30.1",
     "gh-pages": "^4.0.0",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
     "prettier": "^2.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "^2.75.7",
     "tslib": "^2.4.0",
     "typescript": "^4.7.4"
-  },
-  "files": [
-    "dist"
-  ]
+  }
 }