# UI 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

```tsx
<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](https://ant.design/components/config-provider/#API). | false     |

#### For example

```tsx
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

```typescript
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

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

#### For example

{% hint style="info" %}
Wrap the parent by UIProvider before accessing the context.
{% endhint %}

```tsx
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)
```