Context Providers
When you're managing 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, or your component to inherit color and styling from the Flex Theme configuration instead of setting up unique branding for every component.
withTaskContext(Component) => React.ReactElement<any>#
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.
Parameters:
Component: React.ReactElement<any>Any user-defined React Component.
Returns:
React.ReactElement<any>withTaskContext()creates a Higher order component which can read the properties of the Task object.
Example:
import React from 'react';import { withTaskContext } from '@twilio/flex-ui';// Set text color to whiteconst 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);withTheme(Component) => React.ReactElement<any>#
Flex includes a withTheme() helper function that adds data about the current Theme to your component.
Parameters:
Component: React.ReactElement<any>Any user-defined React component
Returns:
React.ReactElement<any>withTheme()creates a Higher order component which can read the current Theme properties.
Example:
import React from "react";import { withTheme } from "@twilio/flex-ui";import styled from "react-emotion";
class MyComponent extends React.Component {constructor(props) { super(props); // Print the current theme object // You can have a look at 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 backgroundconst TaskSID = styled("div")` background-color: ${(props) => props.theme.MainHeader.Container.background};`;// Note the added withTheme() helper functionexport default withTheme(MyComponent);