react-feather#Copy TypeScript Examples

The following examples show how to use react-feather#Copy. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Copy.tsx    From cuiswap with GNU General Public License v3.0 6 votes vote down vote up 
export default function CopyHelper(props: { toCopy: string; children?: React.ReactNode }) {
  const [isCopied, setCopied] = useCopyClipboard()

  return (
    <CopyIcon onClick={() => setCopied(props.toCopy)}>
      {isCopied ? (
        <TransactionStatusText>
          <CheckCircle size={'16'} />
          <TransactionStatusText>Copied</TransactionStatusText>
        </TransactionStatusText>
      ) : (
        <TransactionStatusText>
          <Copy size={'16'} />
        </TransactionStatusText>
      )}
      {isCopied ? '' : props.children}
    </CopyIcon>
  )
}
Example #2
Source File: CopyHelper.tsx    From interface-v2 with GNU General Public License v3.0 6 votes vote down vote up 
CopyHelper: React.FC<CopyHelperProps> = ({ toCopy, children }) => {
  const [isCopied, setCopied] = useCopyClipboard();
  const classes = useStyles();

  return (
    <Box className={classes.copyIcon} onClick={() => setCopied(toCopy)}>
      {isCopied ? (
        <>
          <CheckCircle size='20' />
          <Typography style={{ marginLeft: 4 }} variant='body2'>
            Copied
          </Typography>
        </>
      ) : (
        <Copy size='20' />
      )}
      {isCopied ? '' : children}
    </Box>
  );
}
Example #3
Source File: Copy.tsx    From sybil-interface with GNU General Public License v3.0 6 votes vote down vote up 
CopyHelper = (props: { toCopy: string; children?: React.ReactNode }): JSX.Element => {
  const [isCopied, setCopied] = useCopyClipboard()

  return (
    <CopyIcon onClick={() => setCopied(props.toCopy)}>
      {isCopied ? (
        <TransactionStatusText>
          <CheckCircle size={'16'} />
          <TransactionStatusText>Copied</TransactionStatusText>
        </TransactionStatusText>
      ) : (
        <TransactionStatusText>
          <Copy size={'16'} />
        </TransactionStatusText>
      )}
      {isCopied ? '' : props.children}
    </CopyIcon>
  )
}
Example #4
Source File: Copy.tsx    From cheeseswap-interface with GNU General Public License v3.0 6 votes vote down vote up 
export default function CopyHelper(props: { toCopy: string; children?: React.ReactNode }) {
  const [isCopied, setCopied] = useCopyClipboard()

  return (
    <CopyIcon onClick={() => setCopied(props.toCopy)}>
      {isCopied ? (
        <TransactionStatusText>
          <CheckCircle size={'16'} />
          <TransactionStatusText>Copied</TransactionStatusText>
        </TransactionStatusText>
      ) : (
        <TransactionStatusText>
          <Copy size={'16'} />
        </TransactionStatusText>
      )}
      {isCopied ? '' : props.children}
    </CopyIcon>
  )
}
Example #5
Source File: Copy.tsx    From goose-frontend-amm with GNU General Public License v3.0 6 votes vote down vote up 
export default function CopyHelper(props: { toCopy: string; children: React.ReactNode }) {
  const [isCopied, setCopied] = useCopyClipboard()
  const { children, toCopy } = props

  return (
    <CopyIcon onClick={() => setCopied(toCopy)}>
      {isCopied ? (
        <TransactionStatusText>
          <CheckCircle size="16" />
          <TransactionStatusText>Copied</TransactionStatusText>
        </TransactionStatusText>
      ) : (
        <TransactionStatusText>
          <Copy size="16" />
        </TransactionStatusText>
      )}
      {isCopied ? '' : children}
    </CopyIcon>
  )
}
Example #6
Source File: getMenuOrDrawerItems.tsx    From calories-in with MIT License 5 votes vote down vote up 
CopyStyled = chakra(Copy)
Example #7
Source File: getMenuOrDrawerItems.tsx    From calories-in with MIT License 5 votes vote down vote up 
CopyStyled = chakra(Copy)
Example #8
Source File: ShareModal.tsx    From crypto-fees with MIT License 4 votes vote down vote up 
ShareModal: React.FC<ShareModalProps> = ({ open, onClose, data, date }) => {
  const [copied, setCopied] = useState(false);
  const svgContainer = useRef<any>(null);

  // We have to insert the CSS locally so saveSvgAsPng can query fonts
  useEffect(() => {
    fetch('https://use.typekit.net/jrq0bbf.css')
      .then((request: any) => request.text())
      .then((css: string) => {
        const style = document.createElement('style');
        style.appendChild(document.createTextNode(css));
        document.head.appendChild(style);
      });
  }, []);

  if (!open) {
    return null;
  }

  const download = async () => {
    await saveSvgAsPng(svgContainer.current.firstChild, 'crypofees.png');
  };

  const copy = async () => {
    const uri = await svgAsPngUri(svgContainer.current.firstChild, 'crypofees.png');
    const blob = uriToBlob(uri);
    // @ts-ignore
    navigator.clipboard.write([
      // @ts-ignore
      new ClipboardItem({ 'image/png': blob }), // eslint-disable-line no-undef
    ]);
    setCopied(true);
    setTimeout(() => setCopied(false), 5000);
  };

  return (
    <div className="modal" onClick={onClose}>
      <div className="content" onClick={(e: any) => e.stopPropagation()}>
        <h2>
          <button className="close" onClick={onClose}>
            ×
          </button>
          Share
        </h2>

        <div className="card-border" ref={svgContainer}>
          <SocialCard data={data} date={date} />
        </div>

        <div className="buttons">
          <Button
            href={`https://twitter.com/intent/tweet?text=${encodeURI(
              'CryptoFees.info'
            )}&url=${encodeURI(window.location.href)}`}
            Icon={Twitter}
          >
            Share on Twitter
          </Button>

          <Button onClick={copy} Icon={Copy}>
            {copied ? 'Copied' : 'Copy Image'}
          </Button>
          <Button onClick={download} Icon={Download}>
            Download Image
          </Button>
        </div>
      </div>

      <style jsx>{`
        .modal {
          position: fixed;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          background: #aaaaaaaa;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }

        .content {
          width: 600px;
          max-width: 100%;
          background: #f9fafc;
          padding: 12px;
        }

        .card-border {
          margin: 4px 0;
          border: solid 1px #777;
        }

        h2 {
          margin: 0;
        }

        .close {
          border: none;
          background: transparent;
          float: right;
          font-size: 24px;
          cursor: pointer;
          outline: none;
        }

        .buttons {
          display: flex;
        }
        .buttons > :global(*) {
          margin-right: 4px;
        }
      `}</style>
    </div>
  );
}