binance-fiat-widget

install

    npm install binance-fiat-widget

used

    <div id="widget"></div>

    import {Widget} from 'binance-fiat-widget'

    const options = {
        locale: 'en',
        width: 200,
        theme: 'dark',
        urlParmas: {
            ref: '',
            utm_source: ''
        }
    }

    Widget('#widget', options)

Parameters

• el: selector or DOM element

  • react

      import {Widget, unloadWidget} from 'binance-fiat-widget'
      const app = () => {
          const t = useRef<HTMLDivElement>(null)
          // or
          // const t = document.querySelector('#test')
  
          useEffect(() => {
              if (t) {
                  Widget(t)
              }
              return () => unloadWidget()
          }, [])
          return (<div id="#test" ref={r}></div>)
      }
      
  

  • cdn

      <script src="https://bin.bnbstatic.com/static/js/ocbs/binance-fiat-widget.js"></script>
      <div id="widget"></div>
  

      const t = document.querySelector('#test')
      window.binanceFiatWidget.Widget(t)
  

• options.locale: string

  i18n, nullable, default: 'en'

  opts: 'en'|'cn'|'tw'|'kr'|'ru'|'vn'|'it'|'es'|'de'|'fr', unsupported locale will fallback to english

• options.width: number

  width, nullable,

  if width is not set, default is el.offsetWidth

  range: 200 - 500

• options.theme: string

  theme, nullable, default: 'light'

  opts: 'light' | 'dark'

• options.urlParmas

  • options.urlParmas.ref: string

    ref id, nullable

  • options.urlParmas.utm_source: string

    UTM source, nullable

• options.api_host: string

  overlay getCoinListApi, nullable

API

• render

  render the widget(after .setXXX() is necessary)

      const w = widget(container, opt)
      w.setTheme('dark').render()
  
  

• setTheme

  change the theme

      const w = widget(container, opt)
      w.setTheme('dark').render()
  

• setLocale

  change the locale

      const w = widget(container, opt)
      w.setLocale('cn').render()
  

• unloadWidget

  remove the widget from page, maybe you will use it in React hooks to replace setXXX

      useEffect(() => {
          if (t?.current) {
              w = Widget(t.current, {
                  theme: theme
              })
          }
          return () => unloadWidget()
  }, [theme])