> For the complete documentation index, see [llms.txt](https://platform.intelie.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://platform.intelie.com/developers/web-application/react-contexts/dashboard-widget.md).

# Dashboard widget

### Context value

```typescript
type DashboarWidgetContext = {
    title: string
    setTitle: string => void
    widget: LiveWidgetEntity // the consolidated widget configuration
    state: LiveDashboardWidgetState // LiveDashboardWidgetState
}
```

### Usage

```jsx
import React, { useContext } from 'react'
import { DashboardWidgetContext } from 'live/context/dashboard-widget'

export default () => {
    const context = useContext(DashboardWidgetContext)

    function updateTitle() {
        context.setTitle(<span style={{color: 'red'}}>My title</span>)
    }
    return <a onClick={updateTitle}>change title</a>
}
```

### Other Widget Types

```typescript
declare type LiveDashboardWidgetState = {
    params: {
        spanFinal: string,
        spanDetached: boolean,
        span: string
    }
    state: {
        loading: boolean,
        receivedData: boolean,
        started: boolean,
        error?: {
            remote: boolean
        },
        lastUpdate?: number,
        lastEventTimestamp?: number,
        layout: {
            title: boolean,
            timespan: boolean,
            lastUpdate: boolean
        }
    }
    widgetTransientParams?: LiveWidgetConfig
    widget: LiveWidget
}
```