Zap-toolkit-ui NPM

⚡zap-toolkit-ui

zap-toolkit-ui is a set of React components and hooks used to build pages on Zap's apps. It also contains a theme file for dark and light mode.

Install

`yarn add zap-toolkit-ui`
`npm install zap-toolkit-ui`        // (npm install zap-toolkit-ui --legacy-peer-deps)

Setup

Theme

Before using zap-toolkit-ui, you need to provide the theme file to styled-component.

import { ThemeProvider } from 'styled-components'
import { light, dark } from 'zap-toolkit-ui'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>

Reset

A reset CSS is available as a global styled component.

import { ResetCSS } from 'zap-toolkit-ui'
...
<ResetCSS />

Component

import { Text, Flex, Card, GradientButton, useMatchBreakpoints,  PageHeader } from 'zap-toolkit-ui'

Required(peerDependencies)

"@binance-chain/bsc-connector",
"@ethersproject/address",
"@ethersproject/contracts",
"@ethersproject/networks",
"@ethersproject/providers",
"@ethersproject/solidity",
"@popperjs/core",
"@reduxjs/toolkit",
"@testing-library/jest-dom",
"@testing-library/react",
"@testing-library/user-event",
"@types/jest",
"@types/lodash",
"@types/node",
"@types/react",
"@types/react-dom",
"@types/react-router-dom",
"@types/react-transition-group",
"@types/styled-components",
"@types/styled-system",
"@web3-react/abstract-connector",
"@web3-react/core",
"@web3-react/injected-connector",
"@web3-react/types",
"@web3-react/walletconnect-connector",
"@web3-react/walletlink-connector",
"addon-redux",
"cryptocurrency-icons",
"ethers",
"react",
"react-dom",
"react-helmet-async",
"react-icons",
"react-redux",
"react-router-dom",
"react-scripts",
"react-transition-group",
"styled-components",
"styled-system",
"web-vitals",
"web3",
"web3-utils"