feat: notify user they've copied to clipboard on copy

1 files changed, 29 insertions, 14 deletions

diff --git a/packages/website/ts/pages/instant/code_demo.tsx b/packages/website/ts/pages/instant/code_demo.tsx
index c5e565d61..b7a9f5b17 100644
--- a/packages/website/ts/pages/instant/code_demo.tsx
+++ b/packages/website/ts/pages/instant/code_demo.tsx
@@ -145,17 +145,32 @@ export interface CodeDemoProps {
     children: string;
 }
 
-export const CodeDemo: React.StatelessComponent<CodeDemoProps> = props => (
-    <Container position="relative" height="100%">
-        <Container position="absolute" top="10px" right="10px">
-            <CopyToClipboard text={props.children}>
-                <Button fontSize="14px">
-                    <b>Copy</b>
-                </Button>
-            </CopyToClipboard>
-        </Container>
-        <SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}>
-            {props.children}
-        </SyntaxHighlighter>
-    </Container>
-);
+export interface CodeDemoState {
+    didCopyCode: boolean;
+}
+
+export class CodeDemo extends React.Component<CodeDemoProps, CodeDemoState> {
+    public state: CodeDemoState = {
+        didCopyCode: false,
+    };
+    public render(): React.ReactNode {
+        const copyButtonText = this.state.didCopyCode ? 'Copied!' : 'Copy';
+        return (
+            <Container position="relative" height="100%">
+                <Container position="absolute" top="10px" right="10px">
+                    <CopyToClipboard text={this.props.children} onCopy={this._handleCopyClick}>
+                        <Button fontSize="14px">
+                            <b>{copyButtonText}</b>
+                        </Button>
+                    </CopyToClipboard>
+                </Container>
+                <SyntaxHighlighter language="html" style={customStyle} showLineNumbers={true} PreTag={CustomPre}>
+                    {this.props.children}
+                </SyntaxHighlighter>
+            </Container>
+        );
+    }
+    private readonly _handleCopyClick = () => {
+        this.setState({ didCopyCode: true });
+    };
+}