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

# Context

Sometimes you need to do more than just sending events between components. In some cases you might want a way to manage shared state between multiple components. You can do it using WebComp's Context.

## Using Context

Here's how to use WebComp's Context

### 1. Import context

```jsx
import { WebComponent, register } from '@webcomp/core'
import withContext from '@webcomp/context'
```

### 2. Wrap your component in `withContext` before registering

```jsx
class SideBarComponent extends WebComponent {
  render(props) {
    return (
      <aside>
        <img src="" />
        <span className="username">@</span>
      </aside>
    );
  }
}

// Provide a name for the context
const SideBar = withContext('user-data')(SideBarComponent)

register(SideBar, 'side-bar')
```

### 3. Get context from props

Once rendered, context-enabled component will have access to `this.props.context` which is an array with a value and a function to set that value:

```jsx
class SideBarComponent extends WebComponent {
  render(props) {
    const [user, setUser] = props.context
    // You can use setUser to change the value of `user` in the context

    return (
      <aside>
        <img src={user.avatarUrl} />
        <span className="username">@{user.username}</span>
      </aside>
    );
  }
}

const SideBar = withContext('user-data')(SideBarComponent)

register(SideBar, 'side-bar')
```

## Initial context value

By default, any context value you use is going to be set to `null` on the initial render. You can override this behavior in one of the two ways:

### Second argument in `withContext`

```jsx
const SideBar = withContext('user-data', { username: 'max' })(SideBarComponent)
```

### `getInitialContext` static method

You can also specify a static method to provide initial data for the context

```jsx
class SideBarComponent extends WebComponent {
  static getInitialContext() {
    return { username: 'max' }
  }
  
  render(props) {
    const [user, setUser] = props.context
    // You can use setUser to change the value of `user` in the context

    return (
      <aside>
        <img src={user.avatarUrl} />
        <span className="username">@{user.username}</span>
      </aside>
    );
  }
}
```

You can return a promise in `getInitialContext`, but keep in mind that it may result in a content flash if you have async operations in `getInitialContext` that take too long.

***Note:** Keep in mind, that both `withContext` initial value and `getInitialContext` are only used if the context value doesn't exist. If it has been populated before, they will be ignored.*