Add copy to clipboard component (#380)

pynecone/.templates/web/package.json

@@ -20,6 +20,7 @@
     "plotly.js": "2.6.4",
     "prettier": "^2.8.1",
     "react": "^17.0.2",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^17.0.2",
     "react-markdown": "^8.0.3",
     "react-plotly.js": "^2.6.0",

pynecone/components/forms/__init__.py

@@ -2,6 +2,7 @@
 
 from .button import Button, ButtonGroup
 from .checkbox import Checkbox, CheckboxGroup
+from .copytoclipboard import CopyToClipboard
 from .editable import Editable, EditableInput, EditablePreview, EditableTextarea
 from .formcontrol import FormControl, FormErrorMessage, FormHelperText, FormLabel
 from .iconbutton import IconButton

pynecone/components/forms/copytoclipboard.py

@@ -0,0 +1,26 @@
+"""A copy to clipboard component."""
+
+from typing import Set
+
+from pynecone.components import Component
+from pynecone.var import Var
+
+
+class CopyToClipboard(Component):
+    """Component to copy text to clipboard."""
+
+    library = "react-copy-to-clipboard"
+
+    tag = "CopyToClipboard"
+
+    # The text to copy when clicked.
+    text: Var[str]
+
+    @classmethod
+    def get_controlled_triggers(cls) -> Set[str]:
+        """Get the event triggers that pass the component's value to the handler.
+
+        Returns:
+            The controlled event triggers.
+        """
+        return {"on_copy"}