Category: JavaScript

To turn an SVG string into an image in a React component, we just put the SVG code in a base64 URL string and set that as the value of the src prop of the img element.

For instance, we write

class SomeComponent extends React.Component {
  render() {
    const image =
      '<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="47.4" height="40.65" viewBox="21 18.5 158 135.5"><path d="M25,50 l150,0 0,100 -150,0 z" stroke-width="4" stroke="black" fill="rgb(128,224,255)" fill-opacity="1" ></path><path d="M25,50 L175,150 M25,150 L175,50" stroke-width="4" stroke="black" fill="black" ></path><g transform="translate(0,0)" stroke-width="4" stroke="black" fill="none" ><circle cx="100" cy="30" r="7.5" fill="black" ></circle><circle cx="70" cy="30" r="7.5" fill="black" ></circle><circle cx="130" cy="30" r="7.5" fill="black" ></circle></g></svg>';
    return (
      <div>
        <img src={`data:image/svg+xml;utf8,${image}`} />
      </div>
    );
  }
}

to put image into the base64 template string.

Then we use the base64 string as the value of the img element src prop.

To add type of the parameter for onKeyPress with TypeScript and React, we set the type of the event object to React.KeyboardEvent<FormControl>.

For instance, we write

const handleKeywordKeyPress = (e: React.KeyboardEvent<FormControl>) => {
  if (e.key === "Enter") {
    if (isFormValid()) {
      handleCreateClicked();
    }
  }
};

to set the e parameter to the React.KeyboardEvent<FormControl> type.

Then we can use e.key to check which key is pressed.

To proxy to backend with default Next.js dev server, we configure our Next.js config with the URL rewrite.

For instance, in next.config.js, we write

module.exports = {
  async rewrites() {
    return [
      {
        source: "/api/:path*",
        destination: "http://localhost:8000/:path*",
      },
    ];
  },
};

to return an array with an object with the source path and the destination path which we redirect the source path to.

This lets us create a proxy to the back end for our Next.js app

To retrieve a list of all market pairs like ETH/BTC using Binance API with React, we create our own array with the currency lists.

For instance, we write

[
  "BTC",
  "LTC",
  "ETH",
  "NEO",
  "BNB",
  "QTUM",
  "EOS",
  "SNT",
  "BNT",
  "GAS",
  "BCC",
  "USDT",
  "HSR",
  "OAX",
  "DNT",
  "MCO",
  "ICN",
  "ZRX",
  "OMG",
  "WTC",
  "YOYO",
  "LRC",
  "TRX",
  "SNGLS",
  "STRAT",
  "BQX",
  "FUN",
  "KNC",
  "CDT",
  "XVG",
  "IOTA",
  "SNM",
  "LINK",
  "CVC",
  "TNT",
  "REP",
  "MDA",
  "MTL",
  "SALT",
  "NULS",
  "SUB",
  "STX",
  "MTH",
  "ADX",
  "ETC",
  "ENG",
  "ZEC",
  "AST",
  "GNT",
  "DGD",
  "BAT",
  "DASH",
  "POWR",
  "BTG",
  "REQ",
  "XMR",
  "EVX",
  "VIB",
  "ENJ",
  "VEN",
  "ARK",
  "XRP",
  "MOD",
  "STORJ",
  "KMD",
  "RCN",
  "EDO",
  "DATA",
  "DLT",
  "MANA",
  "PPT",
  "RDN",
  "GXS",
  "AMB",
  "ARN",
  "BCPT",
  "CND",
  "GVT",
  "POE",
  "BTS",
  "FUEL",
  "XZC",
  "QSP",
  "LSK",
  "BCD",
  "TNB",
  "ADA",
  "LEND",
  "XLM",
  "CMT",
  "WAVES",
  "WABI",
  "GTO",
  "ICX",
  "OST",
  "ELF",
  "AION",
  "WINGS",
  "BRD",
  "NEBL",
  "NAV",
  "VIBE",
  "LUN",
  "TRIG",
  "APPC",
  "CHAT",
  "RLC",
  "INS",
  "PIVX",
  "IOST",
  "STEEM",
  "NANO",
  "AE",
  "VIA",
  "BLZ",
  "SYS",
  "RPX",
  "NCASH",
  "POA",
  "ONT",
  "ZIL",
  "STORM",
  "XEM",
  "WAN",
  "WPR",
  "QLC",
  "GRS",
  "CLOAK",
  "LOOM",
  "BCN",
  "TUSD",
  "ZEN",
  "SKY",
  "THETA",
  "IOTX",
  "QKC",
  "AGI",
  "NXS",
  "SC",
  "NPXS",
  "KEY",
  "NAS",
  "MFT",
  "DENT",
  "IQ",
  "ARDR",
  "HOT",
  "VET",
  "DOCK",
  "POLY",
  "VTHO",
  "ONG",
  "PHX",
  "HC",
  "GO",
  "PAX",
  "RVN",
  "DCR",
  "USDC",
  "MITH",
  "BCHABC",
  "BCHSV",
  "REN",
  "BTT",
  "USDS",
  "FET",
  "TFUEL",
  "CELR",
  "MATIC",
  "ATOM",
  "PHB",
  "ONE",
  "FTM",
  "BTCB",
  "USDSB",
  "CHZ",
  "COS",
  "ALGO",
  "ERD",
  "DOGE",
  "BGBP",
  "DUSK",
  "ANKR",
  "WIN",
  "TUSDB",
  "COCOS",
  "PERL",
  "TOMO",
  "BUSD",
  "BAND",
  "BEAM",
  "HBAR",
  "XTZ",
  "NGN",
  "DGB",
  "NKN",
  "GBP",
  "EUR",
  "KAVA",
  "RUB",
  "UAH",
  "ARPA",
  "TRY",
  "CTXC",
  "AERGO",
  "BCH",
  "TROY",
  "BRL",
  "VITE",
  "FTT",
  "AUD",
  "OGN",
  "DREP",
  "BULL",
  "BEAR",
  "ETHBULL",
  "ETHBEAR",
  "XRPBULL",
  "XRPBEAR",
  "EOSBULL",
  "EOSBEAR",
  "TCT",
  "WRX",
  "LTO",
  "ZAR",
  "MBL",
  "COTI",
  "BKRW",
  "BNBBULL",
  "BNBBEAR",
  "HIVE",
  "STPT",
  "SOL",
  "IDRT",
  "CTSI",
  "CHR",
  "BTCUP",
  "BTCDOWN",
  "HNT",
  "JST",
  "FIO",
  "BIDR",
  "STMX",
  "MDT",
  "PNT",
  "COMP",
  "IRIS",
  "MKR",
  "SXP",
  "SNX",
  "DAI",
  "ETHUP",
  "ETHDOWN",
  "ADAUP",
  "ADADOWN",
  "LINKUP",
  "LINKDOWN",
  "DOT",
  "RUNE",
  "BNBUP",
  "BNBDOWN",
  "XTZUP",
  "XTZDOWN",
  "AVA",
  "BAL",
  "YFI",
  "SRM",
  "ANT",
  "CRV",
  "SAND",
  "OCEAN",
  "NMR",
  "LUNA",
  "IDEX",
  "RSR",
  "PAXG",
  "WNXM",
  "TRB",
  "EGLD",
  "BZRX",
  "WBTC",
  "KSM",
  "SUSHI",
  "YFII",
  "DIA",
  "BEL",
  "UMA",
  "EOSUP",
  "TRXUP",
  "EOSDOWN",
  "TRXDOWN",
  "XRPUP",
  "XRPDOWN",
  "DOTUP",
  "DOTDOWN",
  "NBS",
  "WING",
  "SWRV",
  "LTCUP",
  "LTCDOWN",
  "CREAM",
  "UNI",
  "OXT",
  "SUN",
  "AVAX",
  "BURGER",
  "BAKE",
  "FLM",
  "SCRT",
  "XVS",
  "CAKE",
  "SPARTA",
  "UNIUP",
  "UNIDOWN",
  "ALPHA",
  "ORN",
  "UTK",
  "NEAR",
  "VIDT",
  "AAVE",
  "FIL",
  "SXPUP",
  "SXPDOWN",
  "INJ",
  "FILDOWN",
  "FILUP",
  "YFIUP",
  "YFIDOWN",
  "CTK",
  "EASY",
  "AUDIO",
  "BCHUP",
  "BCHDOWN",
  "BOT",
  "AXS",
  "AKRO",
  "HARD",
  "KP3R",
  "RENBTC",
  "SLP",
  "STRAX",
  "UNFI",
  "CVP",
  "BCHA",
  "FOR",
  "FRONT",
  "ROSE",
  "HEGIC",
  "AAVEUP",
  "AAVEDOWN",
  "PROM",
  "BETH",
  "SKL",
  "GLM",
  "SUSD",
  "COVER",
  "GHST",
  "SUSHIUP",
  "SUSHIDOWN",
  "XLMUP",
  "XLMDOWN",
  "DF",
  "JUV",
  "PSG",
  "BVND",
  "GRT",
  "CELO",
  "TWT",
  "REEF",
  "OG",
  "ATM",
  "ASR",
  "1INCH",
  "RIF",
  "BTCST",
  "TRU",
  "DEXE",
  "CKB",
  "FIRO",
  "LIT",
  "PROS",
  "VAI",
  "SFP",
  "FXS",
  "DODO",
  "AUCTION",
  "UFT",
  "ACM",
  "PHA",
  "TVK",
  "BADGER",
  "FIS",
  "OM",
  "POND",
  "ALICE",
  "DEGO",
  "BIFI",
  "LINA",
];

to add an array with all the coin abbreviations.

We can then use this directly our export it a module and import and use it.

To change the primary and secondary colors in React MUI, we call createTheme to create a theme with the primary and secondary colors.

For instance, we write

import React from "react";
import { render } from "react-dom";
import { MuiThemeProvider, createTheme } from "@material-ui/core/styles";
import Root from "./Root";

const theme = createTheme({
  palette: {
    secondary: {
      main: "#E33E7F",
    },
  },
});

function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <Root />
    </MuiThemeProvider>
  );
}

render(<App />, document.querySelector("#app"));

to call createTheme with an object with the palette property with the colors.

Then we wrap our app with MuiThemeProvider with the theme prop set to theme to apply the theme colors.