> For the complete documentation index, see [llms.txt](https://docs.sentre.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sentre.io/development/providers.md).

# Providers

## \[Deprecated since senhub v4]

{% hint style="info" %}
Consider [Hooks](/advanced-usage/hooks.md) instead. They serve the same functionality but with better performance.
{% endhint %}

By these context providers, a DApp can easily access data that is provided by the os. The context is pretty diverse including user interface info, wallet info, blockchain data, etc.

To use a provider, you need to wrap your DApps by the provider. For example, to access the user interface info like current viewpoint, is-touchable, etc., I have to wrap the widget view into the UI Provider.

```typescript
// widget.app.tsx
// ...
const Widget = () => {
  return (
    <UIProvider appId={appId}>
      <Provider store={model}>
        <WidgetView />
      </Provider>
    </UIProvider>
  )
}
// ...
```

Then all components inside the widget view can read the user interface info like this,

```typescript
// widget/index.tsx
// ...
import { useUI } from 'senhub/providers'

const Widget = () => {
  const {
    ui: { width, infix },
  } = useUI()
}
// ...
```