Menu

Expand
Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

Add Context to Custom Components

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.

Add Task data to a custom component

Flex includes a withTaskContext() helper function that adds data about the selected Task to your component.

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

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

class CustomCRM 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.sid : '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(CustomCRM);

Add Theme data to a custom component

Flex includes a withTheme() helper function that adds data about the current Theme to your component.

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

class CustomCRM 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 background
const TaskSID = styled("div")`
  background-color: ${props => props.theme.MainHeader.Container.background};
`;

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

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.

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

class CustomCRM 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>You can access the current Task data AND the current theme.</p>
      <p>Task SID: <span style={{ fontWeight: 'bold' }}>{task ? task.sid : 'No task selected'}</span></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(CustomCRM));
Rate this page:

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd browsing the Twilio tag on Stack Overflow.