UI Provider

🌈 User Interface Provider

UIProvider is strictly required if the DApp uses default UI system of the platform, or a customized design system based on Ant Design.

API

<UIProvider> ... </UIProvider>

Property	Type	Description	Default
children	ReactNode	The wrapped children.	undefined
appId	string	DApp's id.
style	?CSSPreperties	The additional style for span tags.	{}
antd	? (boolean | FC<ConfigProviderProps>)	Enable isolated antd. You can input the ConfigProvider as Ant Design ConfigProvider API.	false

For example

import { UIProvider } from '@sentre/senhub'

// Wrap a paragraph as a child and style it to red color.
<UIProvider appId="my_app" style={{color: 'red'}}>
  <p>Hello world</p>
</UIProvider>

Context

type Provider = {
  ui: State
}

type State = {
  theme: 'light' | 'dark'
  width: number
  infix: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
  touchable: boolean
  visibleActionCenter: boolean
}

Provider

Property	Type	Description
ui	State	The user interface data.

State

Property	Type	Description
theme	light | dark	Current theme mode.
width	number	Current width of screen.
infix	xs | sm | md | lg | xl | xxl	Current breakpoint of screen.
touchable	boolean	Whether or not touch screen.
visibleActionCenter	boolean	Whether or not visible action center.

Hook & HOC

import { useUI, withUI } from '@senhub/providers'

For example

Wrap the parent by UIProvider before accessing the context.

import { useUI, withUI } from '@senhub/providers'

// Within a functional component
const Component = () => {
  const {
    ui: { width, infix },
  } = useUI()
}
export default Component

// Within a class component
class Component {
  render() {
    const {
      ui: { width, infix },
    } = this.props
  }
}
export default withUI(Component)