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.
<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>) | false |
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>
type Provider = {
ui: State
}
type State = {
theme: 'light' | 'dark'
width: number
infix: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
touchable: boolean
visibleActionCenter: boolean
}
Property | Type | Description |
|---|---|---|
ui | State | The user interface data. |
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. |
import { useUI, withUI } from '@senhub/providers'
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)
Last modified 1yr ago