Clipboard

import React, { useState } from 'react';
import { Button, Col, Form, InputGroup, Row } from 'react-bootstrap';
import CopyToClipboard from 'react-copy-to-clipboard';
import NubraTooltip from '../../../components/@nubra-tooltip/NubraTooltip';

const ClipboardExample1 = () => {
   const [textValue, setTextValue] = useState("HDFCNOW20");
   const [linkValue, setLinkValue] = useState("https://hencework.com");
   const [isCopied, setIsCopied] = useState(false);

   const setCopied = () => {
       setIsCopied(true)
       setTimeout(() => { setIsCopied(false) }, 1000);
   }

  return (
    <Row>
        <Col>
            <Form>
                <Form.Group className="mb-3">
                    <CopyToClipboard text={textValue}>
                        <InputGroup>
                            <Form.Control id="clip_1" type="text" value={textValue} onChange={e => setTextValue(e.target.value)} />
                            <NubraTooltip placement="top" title={isCopied ? "Copied" : "Copy to Clipboard"} >
                                <Button variant="primary" className="copy-to-clipboard" data-clipboard-target="#clip_1" type="button" onClick={() => setCopied()}>
                                    Copy Code
                                </Button>
                            </NubraTooltip>
                        </InputGroup>
                    </CopyToClipboard>
                </Form.Group>
                <Form.Group>
                    <CopyToClipboard text={linkValue} >
                        <InputGroup>
                            <Form.Control id="clip_2" type="text" value={linkValue} onChange={e => setLinkValue(e.target.value)} />
                            <NubraTooltip placement="top" title={isCopied ? "Copied" : "Copy to Clipboard"} >
                                <Button variant="primary" className="copy-to-clipboard" data-clipboard-target="#clip_1" type="button" onClick={() => setCopied()}>
                                    Copy Link
                                </Button>
                            </NubraTooltip>
                        </InputGroup>
                    </CopyToClipboard>
                </Form.Group>
            </Form>
        </Col>
    </Row>
  );
};

export default ClipboardExample1;

import Markdown from 'markdown-to-jsx';
import React, { useEffect, useState } from 'react';
import Codes from './Codes';
import code from './Mardown/demoMd';

const CodeBox = () => {

    const [markdown, setMarkdown] = useState('')

    useEffect(() => {
        fetch(code)
            .then(response => response.text())
            .then(response => setMarkdown(response))
            // .catch(err => console.log(err))
    }, [code])

    return (
        <Markdown
            options={{
                overrides: {
                    Code: {
                        component: Codes,
                    }
                }
            }}
        >
            {markdown}
        </Markdown>
    )
}

export default CodeBox