Sentre
Search
K

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)