[BUILD]: Add copy to clipboard button

README.md

@@ -2,28 +2,24 @@
 <img align="center" height="150" src="https://user-images.githubusercontent.com/43678736/118854376-49f1f480-b89a-11eb-91f6-a0f59c30c6c4.png" alt="Unlimited React components logologo">
 
 <h1 align="center">  React Highlight ✨🖍️</h1>
+React component for highlighting js and jsx code
 </p>
 
-![npm latest package](https://img.shields.io/badge/npm%40last-1.3.1-cyan)
+[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/dropzone-ui/react/blob/HEAD/LICENSE)
+[![npm latest package](https://img.shields.io/npm/v/@unlimited-react-components/react-highlight.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen)](https://www.npmjs.com/package/@unlimited-react-components/react-highlight)
 [![install size](https://packagephobia.com/badge?p=@unlimited-react-components/react-highlight)](https://packagephobia.com/result?p=@unlimited-react-components/react-highlight)
-[![dependencies Status](https://status.david-dm.org/gh/unlimited-react-components/react-highlight.svg)](https://david-dm.org/unlimited-react-components/react-highlight)
 [![Coverage Status](https://coveralls.io/repos/github/unlimited-react-components/react-highlight/badge.svg?branch=master)](https://coveralls.io/github/unlimited-react-components/react-highlight?branch=master)
 [![Build Status](https://travis-ci.org/unlimited-react-components/react-highlight.svg?branch=master)](https://travis-ci.org/unlimited-react-components/react-highlight)
 [![Known Vulnerabilities](https://snyk.io/test/github/unlimited-react-components/react-highlight/badge.svg)](https://snyk.io/test/github/unlimited-react-components/react-highlight)
 [![Total alerts](https://img.shields.io/lgtm/alerts/g/unlimited-react-components/react-highlight.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/unlimited-react-components/react-highlight/alerts/)
 [![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/unlimited-react-components/react-highlight.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/unlimited-react-components/react-highlight/context:javascript)
 
 
-If you have any issue or suggestion, or wanna improve the repo adding other languages highlights, let me know it on the github section: "[issues](https://github.com/unlimited-react-components/react-highlight/issues)", or make a pull request.
 
-## Description
-
-Highlight your JSX code with a react Highlight component.
-
-Sample result:
+## Sample result:
 
 <p align="center">
-<img align="center" width="65%" src="https://user-images.githubusercontent.com/43678736/119084603-b74f7380-b9c7-11eb-8ea3-752cf72098e5.png" alt="Sample result image">
+<img align="center" width="100%" src="https://user-images.githubusercontent.com/43678736/143381929-dc2654db-9186-45a4-be9f-55c6f0ba684e.png" alt="Sample result image">
 </p>
 
 ## Installation
@@ -33,6 +29,9 @@ react-highlight is available as an [npm package](https://www.npmjs.com/package/@
 ```sh
 // with npm
 npm i @unlimited-react-components/react-highlight
+
+// or yran
+yarn add @unlimited-react-components/react-highlight
 ```
 
 ## Usage
@@ -41,17 +40,12 @@ Here is a quick example to get you started, **it's all you need**:
 
 [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-highlight-demo-7o9pq)
 
-````jsx
+```jsx
 import "./styles.css";
 import { Highligther } from "@unlimited-react-components/react-highlight";
 
 const App = (props) => {
-  return (
-      <Highlighter>
-        {makeCode} 
-      </Highlighter>
-
-  );
+  return <Highlighter>{makeCode}</Highlighter>;
 };
 export default App;
 const makeCode = `
@@ -72,18 +66,17 @@ const makeCode = `
     
     const ThemedButton =() => { ... }
 `;
-
-
-````
+```
 
 ## Props
 
+| Name                | Description                                                           | Default   |
+| ------------------- | --------------------------------------------------------------------- | --------- |
+| `code`              | The JSX code to be highlighted.                                       | ""        |
+| `style`             | The in-line CSS object. Only affects the container                    | { }       |
+| `children`          | The JSX code to be highlighted in string format.                      | ""        |
+| `onCopyToClipboard` | A Funtion that is triggered when copy to clipboard button is clicked. Returns the copied code as a string as first parameter. | undefined |
 
-| Name       | Description                                        | Default                                    |
-| ------------ | ---------------------------------------------------- | -------------------------------------------- |
-| `code`     | The JSX code to be highlighted.                    | ""                                         |
-| `style`    | The in-line CSS object. Only affects the container | { }                                        |
-| `children`    | The JSX code to be highlighted in string format. | ""                                         |
 ## License
 
 This project is licensed under the terms of the

build/Components/ClipBoard.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const Clipboard: ({ code, onCopyToClipboard, }: {
+    code?: string;
+    onCopyToClipboard?: (_code: string) => void;
+}) => JSX.Element;
+export default Clipboard;

build/Components/HighLighterProps.d.ts

@@ -15,4 +15,8 @@ export interface HighLighterProps {
     * style properties that affects only the container
     */
     children?: string;
+    /**
+     * event that is triggered when copy to clipboard the code
+     */
+    onCopyToClipboard?: (code: string) => void;
 }

build/Icons/Copy.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { copyProps } from "./CopyProps";
+declare const Copy: FC<copyProps>;
+export default Copy;

build/Icons/CopyProps.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from "./IconProps";
+export interface copyProps extends IconProps {
+}

build/Icons/Done.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { DoneProps } from "./DoneProps";
+declare const Done: FC<DoneProps>;
+export default Done;

build/Icons/DoneProps.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from "./IconProps";
+export interface DoneProps extends IconProps {
+}

build/Icons/IconProps.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from "react";
+export interface IconProps {
+    size?: "micro" | "small" | "semi-medium" | "medium" | "large";
+    color?: string;
+    colorFill?: string;
+    onClick?: Function;
+    style?: CSSProperties;
+    className?: string;
+}

build/Icons/utils/utils.d.ts

@@ -0,0 +1,2 @@
+import { IconProps } from "../IconProps";
+export declare const parseSize: (sizeStr: IconProps["size"]) => number;

build/index.d.ts

@@ -1,2 +1,3 @@
 import Highlighter from "./Components/Highlighter";
-export { Highlighter };
+import Clipboard from "./Components/ClipBoard";
+export { Highlighter, Clipboard };