How to copy given text to the clipboard in react with typescript

import React from 'react';
import { LightTooltip } from '../tooltip/lightTooltip';

interface IOwnProps {
  messageToBeCopied: string | null;
}

export default class CopyToClipboard extends React.Component<IOwnProps> {

  render() {
    const { messageToBeCopied, children } = this.props;
    let isCopySuccess = false;

    if (messageToBeCopied) {
      try {
        const textField = document.createElement('textarea');
        textField.innerText = messageToBeCopied;
        document.body.appendChild(textField);
        textField.select();

        isCopySuccess = document.execCommand('copy');
        textField.remove();

      } catch (e) {
        isCopySuccess = false;
      }

      return (
        <LightTooltip
          leaveDelay={1}
          leaveTouchDelay={1}
          title={isCopySuccess === false ? 'Failed to copy.' : 'Copied.'}
        >
          {children as React.ReactElement}
        </LightTooltip>
      );
    }

    return <>{children}</>;
  }
}

import { withStyles, Theme } from '@material-ui/core/styles';
import Tooltip from '@material-ui/core/Tooltip';

export  const LightTooltip = withStyles((theme: Theme) => ({
  tooltip: {
    backgroundColor: theme.palette.common.white,
    color: 'rgba(0, 0, 0, 0.87)',
    boxShadow: theme.shadows[1],
    fontSize: 12,
    fontFamily: 'Rubik-Regular',
  },
}))(Tooltip);

import React from 'react';
import CopyToClipboard from '../copyToClipboard/copyToClipboard';

interface IState {
  clipboardMessage: string | null;
}

class Example extends React.Component<null, IState> {
  constructor(props) {
    super(props);
    this.state = {
      clipboardMessage: null,
    };
  }

  setClipboardMessage() {
    const message = 'Message for copy to clipboard';

    this.setState({
      clipboardMessage: message,
    });
  }

  render() {
    return (
      <CopyToClipboard messageToBeCopied={this.state.clipboardMessage}>
        <a onClick={() => this.setClipboardMessage()}>Copy</a>
      </CopyToClipboard>
    );
  }
}

export default Example;

Example screenshot after clicking the text:

How to add fonts into react project

Define your font as follows in your app.scss/app.css :
(You can use your fonts as named in font-family.)

@font-face {
  font-family: 'Rubik-Regular';
  src: local('Rubik'), url(../static/font/Rubik/Rubik-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Rubik-Medium';
  src: local('Rubik'), url(../static/font/Rubik/Rubik-Medium.ttf) format('truetype');
}

Add font files into src/static/font/..

Convert currency code to symbol in react with typescript

import { currencyMap } from './currencyMap';

export default function  getSymbolFromCurrencyCode(currencyCode : string) {
  const code = currencyCode && currencyCode.toUpperCase();
  if (!currencyMap.hasOwnProperty(code)) {
    return currencyCode;
  }
  return currencyMap[code];
}

export const currencyMap = {
  'AED': 'د.إ',
  'AFN': '؋',
  'ALL': 'L',
  'AMD': '֏',
  'ANG': 'ƒ',
  'AOA': 'Kz',
  'ARS': '$',
  'AUD': '$',
  'AWG': 'ƒ',
  'AZN': '₼',
  'BAM': 'KM',
  'BBD': '$',
  'BDT': '৳',
  'BGN': 'лв',
  'BHD': '.د.ب',
  'BIF': 'FBu',
  'BMD': '$',
  'BND': '$',
  'BOB': '$b',
  'BRL': 'R$',
  'BSD': '$',
  'BTC': '฿',
  'BTN': 'Nu.',
  'BWP': 'P',
  'BYR': 'Br',
  'BYN': 'Br',
  'BZD': 'BZ$',
  'CAD': '$',
  'CDF': 'FC',
  'CHF': 'CHF',
  'CLP': '$',
  'CNY': '¥',
  'COP': '$',
  'CRC': '₡',
  'CUC': '$',
  'CUP': '₱',
  'CVE': '$',
  'CZK': 'Kč',
  'DJF': 'Fdj',
  'DKK': 'kr',
  'DOP': 'RD$',
  'DZD': 'دج',
  'EEK': 'kr',
  'EGP': '£',
  'ERN': 'Nfk',
  'ETB': 'Br',
  'ETH': 'Ξ',
  'EUR': '€',
  'FJD': '$',
  'FKP': '£',
  'GBP': '£',
  'GEL': '₾',
  'GGP': '£',
  'GHC': '₵',
  'GHS': 'GH₵',
  'GIP': '£',
  'GMD': 'D',
  'GNF': 'FG',
  'GTQ': 'Q',
  'GYD': '$',
  'HKD': '$',
  'HNL': 'L',
  'HRK': 'kn',
  'HTG': 'G',
  'HUF': 'Ft',
  'IDR': 'Rp',
  'ILS': '₪',
  'IMP': '£',
  'INR': '₹',
  'IQD': 'ع.د',
  'IRR': '﷼',
  'ISK': 'kr',
  'JEP': '£',
  'JMD': 'J$',
  'JOD': 'JD',
  'JPY': '¥',
  'KES': 'KSh',
  'KGS': 'лв',
  'KHR': '៛',
  'KMF': 'CF',
  'KPW': '₩',
  'KRW': '₩',
  'KWD': 'KD',
  'KYD': '$',
  'KZT': 'лв',
  'LAK': '₭',
  'LBP': '£',
  'LKR': '₨',
  'LRD': '$',
  'LSL': 'M',
  'LTC': 'Ł',
  'LTL': 'Lt',
  'LVL': 'Ls',
  'LYD': 'LD',
  'MAD': 'MAD',
  'MDL': 'lei',
  'MGA': 'Ar',
  'MKD': 'ден',
  'MMK': 'K',
  'MNT': '₮',
  'MOP': 'MOP$',
  'MRO': 'UM',
  'MRU': 'UM',
  'MUR': '₨',
  'MVR': 'Rf',
  'MWK': 'MK',
  'MXN': '$',
  'MYR': 'RM',
  'MZN': 'MT',
  'NAD': '$',
  'NGN': '₦',
  'NIO': 'C$',
  'NOK': 'kr',
  'NPR': '₨',
  'NZD': '$',
  'OMR': '﷼',
  'PAB': 'B/.',
  'PEN': 'S/.',
  'PGK': 'K',
  'PHP': '₱',
  'PKR': '₨',
  'PLN': 'zł',
  'PYG': 'Gs',
  'QAR': '﷼',
  'RMB': '￥',
  'RON': 'lei',
  'RSD': 'Дин.',
  'RUB': '₽',
  'RWF': 'R₣',
  'SAR': '﷼',
  'SBD': '$',
  'SCR': '₨',
  'SDG': 'ج.س.',
  'SEK': 'kr',
  'SGD': '$',
  'SHP': '£',
  'SLL': 'Le',
  'SOS': 'S',
  'SRD': '$',
  'SSP': '£',
  'STD': 'Db',
  'STN': 'Db',
  'SVC': '$',
  'SYP': '£',
  'SZL': 'E',
  'THB': '฿',
  'TJS': 'SM',
  'TMT': 'T',
  'TND': 'د.ت',
  'TOP': 'T$',
  'TRL': '₤',
  'TRY': '₺',
  'TL': '₺',
  'TTD': 'TT$',
  'TVD': '$',
  'TWD': 'NT$',
  'TZS': 'TSh',
  'UAH': '₴',
  'UGX': 'USh',
  'USD': '$',
  'UYU': '$U',
  'UZS': 'лв',
  'VEF': 'Bs',
  'VND': '₫',
  'VUV': 'VT',
  'WST': 'WS$',
  'XAF': 'FCFA',
  'XBT': 'Ƀ',
  'XCD': '$',
  'XOF': 'CFA',
  'XPF': '₣',
  'YER': '﷼',
  'ZAR': 'R',
  'ZWD': 'Z$',
}

Example:

import getSymbolFromCurrencyCode from '../commons/currencySymbol/currencySymbolMap';

...
getSymbolFromCurrencyCode('TRY');
...

Typescript index signature example

import Example1 from '../../components/……....';
import Example2 from '../../components/…....';


interface ExampleInfos {
  name: any;
  param1: string;
  param2?: boolean;
}


interface ExampleLayout {
  [key:string]: ExampleInfos;
}


export const exampleMap: ExampleLayout = {
  example1: {
    name: Example1,
    param1: 'medium',
  },
  example2: {
    name: Example2,
    param1: 'medium',
    param2: false,
  },
}

import { exampleMap } from './exampleMap';

...
 const myMap= exampleMap['example1'];
 const myComponent = myMap && myMap.name;
...