# Add Task and Theme Context to Components

When you're [managing custom components](/docs/flex/developer/ui/creating-styling-custom-components) in the Flex UI, you'll likely want to use data from Flex to render your component. For example, you might want your component to display information about the agent's [active Task](/docs/flex/developer/ui/add-components-flex-ui), or your component to inherit color and styling from the [Flex Theme](/docs/flex/developer/ui/overview-of-flex-ui-programmability-options#theming-flex-ui) configuration instead of setting up unique branding for every component.

## Add Task data to a custom component

> \[!NOTE]
>
> The following code sample does not work when mounted to the `Supervisor.TaskCanvas`.

Flex includes a `withTaskContext()` helper function that adds data about the selected Task to your component. You can [read about the properties of the Task object](https://assets.flex.twilio.com/docs/releases/flex-ui/2.1.0/advanced/interfaces/ITask/) in the autogenerated documentation.

```javascript
import React from 'react';
import { withTaskContext } from '@twilio/flex-ui';

// Set text color to white
const TaskSIDText = {
  color: "#FFF"
};

class MyComponent extends React.Component {
  render() {
    // Retrieve Task details
    // (`task` will be undefined if there's no task selected in the UI)
    const { task } = this.props;
    // Render Task SID in component as a test
    return <div style={TaskSIDText}>
      <p>First, make sure we can access the current Task data.</p>
      <p>Task SID: <span style={{ fontWeight: 'bold' }}>{task ? task.taskSid : 'No task selected'}</span></p>
    </div>;
  }
}

// The withTaskContext() helper function creates a
// Higher-Order Component that uses the Context API
// to access Task data, then adds the Task data to
// the wrapped component.
export default withTaskContext(MyComponent);
```

## Add Theme data to a custom component

Flex includes a `withTheme()` helper function that adds data about the [current Theme](/docs/flex/developer/ui/overview-of-flex-ui-programmability-options#theming-flex-ui) to your component.

```javascript
import React from 'react';
import { withTheme } from '@twilio/flex-ui';
import { styled } from "@twilio/flex-ui";

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    // Print the current theme object
    // You can have a look at the structure of this object in the console
    console.log('Current theme: ', this.props.theme);
  }

  render() {
    // Return general text in the component
    return (
      <TaskSID>
        <p>Now, we can change the color of the component's background.</p>
      </TaskSID>
    );
  }
}

// The component that has its background color set
// to the same color as MainHeader background
const TaskSID = styled("div")`
  background-color: ${props => props.theme.MainHeader.Container.background};
`;

// Note the added withTheme() helper function
export default withTheme(MyComponent);
```

## Add Theme and Task data to a custom component

You can use `withTheme()` and `withTaskContext()` together if you want the Theme data and Task data in your custom component.

```javascript
import React from 'react';
import { withTheme, withTaskContext } from '@twilio/flex-ui';
import { styled } from "@twilio/flex-ui";

const TaskSIDText = {
  color: "#FFF", 
  fontWeight: 'bold'
};

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    // Print the current theme object
    // You can look at the structure of this object in the console
    console.log('Current theme: ', this.props.theme);
  }
  render() {
    const { task } = this.props;

    // Print Task SID using styled component `TaskSID` defined below
    return (<TaskSID>
      <p style={TaskSIDText}>You can access the current Task data AND the current theme.   Task SID: {task ? task.taskSid: 'No task selected'}</p>
    </TaskSID>);
  }
}

// Styled component that has its text color set to the same color
// as MainHeader background (i.e., red)
const TaskSID = styled("div")`
  background-color: ${props => props.theme.MainHeader.Container.background};
`;

// Note the added withTheme() helper function
export default withTheme(withTaskContext(MyComponent));
```

## Call a custom component from a plugin

For example, if you wanted to display the Task Data on the Flex CRM container, you need to add the following code to your [Flex plugin](/docs/flex/quickstart/getting-started-plugin).

```javascript
import MyComponent from '<relative_path_to_component_file>';
...
async init(flex, manager) {
    flex.CRMContainer.Content.replace(<MyComponent key="mycrm"/>);

}
```

Refer to [Adding Components to Flex UI](/docs/flex/developer/ui/add-components-flex-ui), [Work with Components and Props](/docs/flex/developer/ui/work-with-components-and-props), and [Create and Style Custom Components](/docs/flex/developer/ui/creating-styling-custom-components) for more guidance on incorporating the code into your plugin and replacing a Flex component.