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

• options.skeletonScreen: boolean

  nullable, default true, show a placeholder widget

API

• setXXX

  setXXX is the function to change Widget's characters, you can use it by chaining likes jquery, and you need to use render to render it

          const w = widget(container, opt)
          w.setTheme('dark').setLocale('cn').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()
    

• render

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

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

  render will fetch api, so render return a Promise

      const w = widget(container, opt)
      w.setTheme('dark').render().then(v => alert('has 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])