{
    "componentChunkName": "component---src-templates-api-template-tsx",
    "path": "/programmable-components/context-providers/",
    "result": {"data":{"entityQuery":{"nodes":[{"name":"context-providers","docName":"Context Providers","properties":[],"description":null,"classdesc":"<p>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 <a href=\"Theme\">Flex Theme</a> configuration instead of setting up unique branding for every component.</p>","examples":null}]},"membersQuery":{"nodes":[{"name":"withTaskContext","docName":null,"longname":"context-providers.withTaskContext","description":"<p>Flex includes a <code>withTaskContext()</code> helper function that adds data about the selected Task to your component. You can read about the properties of the <a href=\"ITask\">Task</a> object.</p>","defaultvalue":null,"type":null,"properties":null,"params":[{"name":"Component","optional":null,"description":"<p>Any user-defined React Component.</p>","type":{"names":["React.ReactElement<any>"]}}],"returns":[{"description":"<p><code>withTaskContext()</code> creates a Higher order component which can read the properties of the <a href=\"ITask\">Task</a> object.</p>","type":{"names":["React.ReactElement<any>"]}}],"scope":"static","readonly":null,"kind":"function","examples":["import React from 'react';\nimport { withTaskContext } from '@twilio/flex-ui';\n// Set text color to white\nconst TaskSIDText = {\n  color: \"#FFF\"\n};\nclass MyComponent extends React.Component {\n  render() {\n    // Retrieve Task details\n    // (`task` will be undefined if there's no task selected in the UI)\n    const { task } = this.props;\n    // Render Task SID in component as a test\n    return (\n         <div style={TaskSIDText}>\n             <p>First, make sure we can access the current Task data.</p>\n             <p>Task SID: <span style={{ fontWeight: 'bold' }}>{task ? task.taskSid : 'No task selected'}</span></p>\n         </div>\n     );\n  }\n}\n\n// The withTaskContext() helper function creates a\n// Higher-Order Component that uses the Context API\n// to access Task data, then adds the Task data to\n// the wrapped component.\nexport default withTaskContext(MyComponent);"]},{"name":"withTheme","docName":null,"longname":"context-providers.withTheme","description":"<p>Flex includes a <code>withTheme()</code> helper function that adds data about the current Theme to your component.</p>","defaultvalue":null,"type":null,"properties":null,"params":[{"name":"Component","optional":null,"description":"<p>Any user-defined React component</p>","type":{"names":["React.ReactElement<any>"]}}],"returns":[{"description":"<p><code>withTheme()</code> creates a Higher order component which can read the current <a href=\"Theme\">Theme</a> properties.</p>","type":{"names":["React.ReactElement<any>"]}}],"scope":"static","readonly":null,"kind":"function","examples":["import React from \"react\";\nimport { withTheme } from \"@twilio/flex-ui\";\nimport styled from \"react-emotion\";\n\nclass MyComponent extends React.Component {\nconstructor(props) {\n        super(props);\n       // Print the current theme object\n       // You can have a look at at the structure of this object in the console\n        console.log(\"Current theme: \", this.props.theme);\n    }\n    render() {\n       // Return general text in the component\n        return (\n            <TaskSID>\n                  <p>Now, we can change the color of the component's background.</p>\n            </TaskSID>\n        );\n    }\n}\n// The component that has its background color set\n// to the same color as MainHeader background\nconst TaskSID = styled(\"div\")`\n    background-color: ${(props) => props.theme.MainHeader.Container.background};\n`;\n// Note the added withTheme() helper function\nexport default withTheme(MyComponent);"]},{"name":"withProfileConnectorContext","docName":null,"longname":"context-providers.withProfileConnectorContext","description":"<p>The withProfileConnectorContext() helper function creates a\nHigher-Order Component that hydrates the children component's\nprofileConnector prop with the related task's profile connector object.\nThis HOC is intended to be wrapped with withTaskContext HOC so taskSid is populated correctly.</p>","defaultvalue":null,"type":null,"properties":null,"params":[{"name":"Component","optional":null,"description":"<p>Any user-defined React Component.</p>","type":{"names":["React.ReactElement<any>"]}}],"returns":[{"description":"<p><code>withProfileConnectorContext()</code> creates a HOC that hydrates the children component's profileConnector prop with the related task's profile connector object.</p>","type":{"names":["React.ReactElement<any>"]}}],"scope":"static","readonly":null,"kind":"function","examples":["Example usage:\n<MyComponent />"]}]},"interfacesQuery":{"nodes":[{"name":"TaskStatusBasedType","docName":null,"longname":"TaskStatusBasedType","description":"<p>Used to define a value based on task status. TaskStatusBasedType accepts a type parameter T which defaults to string.</p>\n<p>The valid types are: T, TaskCallbackType<T> and TaskStatusBasedTypeBase<T><br></p>\n<ul>\n<li>T is a generic type.<br></li>\n<li>TaskCallbackType is a function to provide values for Flex. Called from various areas of Flex.<br></li>\n<li>TaskStatusBasedTypeBase is an object with ReservationStatus as its key and the parameter type T as the value.</li>\n</ul>","defaultvalue":null,"type":null,"properties":null,"params":null,"returns":null},{"name":"Actions","docName":null,"longname":"Actions","description":"<p>Predefined UI actions</p>","defaultvalue":null,"type":null,"properties":[],"params":null,"returns":null},{"name":"LocalizationType","docName":null,"longname":"LocalizationType","description":"<p>Localization Type object containing the locale tag, available locales, and a function to set the locale preference</p>","defaultvalue":null,"type":null,"properties":[{"name":"localeTag","type":{"names":["string"]},"description":"<p>The preferred locale of the user</p>","optional":null,"defaultvalue":""},{"name":"availableLocales","type":{"names":["Array<AvailableLocale>"]},"description":"<p>The available locales in Flex UI</p>","optional":null,"defaultvalue":""},{"name":"setLocalePreference","type":{"names":["function"]},"description":"<p>An async function which sets the preference of the user</p>","optional":null,"defaultvalue":""}],"params":null,"returns":null},{"name":"Strings","docName":null,"longname":"Strings","description":"<p>You can override any string in Flex by editing the strings object on the Flex Manager instance.\nLanguage strings can technically contain any HTML tag like <code>h1</code>, <code>h2</code>, <code>p</code> or even <code>iframe</code>.\nThe Flex UI will not filter these values. Flex uses Handlebars for templating and supports Mustache-style syntax and\nexpressions within content strings, ie. embedding value placeholders between double braces <code>{ }</code>.</p>","defaultvalue":null,"type":null,"properties":[],"params":null,"returns":null},{"name":"AvailableLocale","docName":null,"longname":"AvailableLocale","description":"<p>Available locale containing the tag and name</p>","defaultvalue":null,"type":null,"properties":[{"name":"tag","type":{"names":["string"]},"description":"<p>The language tag of the locale</p>","optional":null,"defaultvalue":""},{"name":"name","type":{"names":["string"]},"description":"<p>The name of the locale</p>","optional":null,"defaultvalue":""}],"params":null,"returns":null},{"name":"AgentCopilotState","docName":null,"longname":"AgentCopilotState","description":"<p>Agent Copilot State for current Agent</p>","defaultvalue":null,"type":null,"properties":[{"name":"config","type":{"names":["AgentCopilotConfigState"]},"description":"<p>AgentCopilotConfigState</p>","optional":null,"defaultvalue":""}],"params":null,"returns":null},{"name":"AgentCopilotConfigState","docName":null,"longname":"AgentCopilotConfigState","description":"<p>Agent Copilot Configuration State for current Agent</p>","defaultvalue":null,"type":null,"properties":[{"name":"enabledQueues","type":{"names":["Array<string>"]},"description":"<p>List of queue SIDs that have Agent Copilot enabled, or all queues if empty</p>","optional":true,"defaultvalue":""},{"name":"displayNotes","type":{"names":["boolean"]},"description":"<p>Whether or not the Notes tab and related components are visible in the UI</p>","optional":null,"defaultvalue":""},{"name":"displaySentiment","type":{"names":["boolean"]},"description":"<p>Whether or not the sentiment input field is visible in the UI</p>","optional":null,"defaultvalue":""},{"name":"multiLanguageEnabled","type":{"names":["boolean"]},"description":"<p>Whether or not multilanguage is enabled for the account</p>","optional":null,"defaultvalue":""}],"params":null,"returns":null},{"name":"AppStatusState","docName":null,"longname":"AppStatusState","description":"<p>State of the view</p>","defaultvalue":null,"type":null,"properties":[{"name":"isAppStatusPanelOpen","type":{"names":["boolean"]},"description":"<p>whether the navigation sidebar is open</p>","optional":null,"defaultvalue":""}],"params":null,"returns":null},{"name":"ConferencesState","docName":null,"longname":"ConferencesState","description":"<p>State for known conferences</p>","defaultvalue":null,"type":null,"properties":[{"name":"states","type":{"names":["Map<string, ConferencesState.ConferenceState>"]},"description":"<p>active conferences states by conference SID</p>","optional":null,"defaultvalue":""}],"params":null,"returns":null},{"name":"ConnectionStatus","docName":null,"longname":"ConnectionStatus","description":"<p>Connection status</p>","defaultvalue":null,"type":null,"properties":[{"name":"timestampLastConnected","type":{"names":["number"]},"description":"<p>timestamp of last connection</p>","optional":null,"defaultvalue":""},{"name":"connectionState","type":{"names":["SyncClient.ConnectionState"]},"description":"<p>connection state of the sync client</p>","optional":null,"defaultvalue":""}],"params":null,"returns":null},{"name":"PhoneState","docName":null,"longname":"PhoneState","description":"<p>Voice call state</p>","defaultvalue":null,"type":null,"properties":[{"name":"listener","type":{"names":["DeviceListener"]},"description":"<p>device listener</p>","optional":true,"defaultvalue":""},{"name":"activeCall","type":{"names":["Call"]},"description":"<p>Source call object. <a href=\"https://www.twilio.com/docs/voice/sdks/javascript/twiliocall\">See</a></p>","optional":true,"defaultvalue":""}],"params":null,"returns":null},{"name":"SessionState","docName":null,"longname":"SessionState","description":"<p>Active session state</p>","defaultvalue":null,"type":null,"properties":[{"name":"identity","type":{"names":["string"]},"description":"<p>identity of a logged-in user</p>","optional":true,"defaultvalue":""},{"name":"loginError","type":{"names":["any"]},"description":"<p>last error that occurred when logging in</p>","optional":true,"defaultvalue":""},{"name":"loginState","type":{"names":["LoginState"]},"description":"<p>current state of the session</p>","optional":true,"defaultvalue":""},{"name":"ssoTokenPayload","type":{"names":["SSOTokenPayload"]},"description":"<p>SSO token payload</p>","optional":true,"defaultvalue":""},{"name":"degraded","type":{"names":["boolean"]},"description":"<p>Indicates if session is degraded</p>","optional":true,"defaultvalue":""}],"params":null,"returns":null},{"name":"SupervisorState","docName":null,"longname":"SupervisorState","description":"<p>State of the supervisor view</p>","defaultvalue":null,"type":null,"properties":[{"name":"callMonitoring","type":{"names":["CallMonitoring"]},"description":"<p>state of call monitoring</p>","optional":null,"defaultvalue":""},{"name":"stickyWorker","type":{"names":["SupervisorWorkerState"]},"description":"<p>currently selected worker state</p>","optional":true,"defaultvalue":""},{"name":"workers","type":{"names":["Array<SupervisorWorkerState>"]},"description":"<p>currently showing worker states</p>","optional":null,"defaultvalue":""},{"name":"isLoadingWorkers","type":{"names":["boolean"]},"description":"<p>if workers are being loaded</p>","optional":null,"defaultvalue":""},{"name":"errorLoadingWorkers","type":{"names":["LiveQueryError"]},"description":"<p>instance of the error when loading workers</p>","optional":null,"defaultvalue":""},{"name":"appliedFilters","type":{"names":["Array<AppliedFilter>"]},"description":"<p>array of applied filters</p>","optional":null,"defaultvalue":""},{"name":"extraFilterQuery","type":{"names":["string"]},"description":"<p>query for custom filters</p>","optional":null,"defaultvalue":""},{"name":"search","type":{"names":["string"]},"description":"<p>search string</p>","optional":null,"defaultvalue":""}],"params":null,"returns":null},{"name":"ViewState","docName":null,"longname":"ViewState","description":"<p>State of the view</p>","defaultvalue":null,"type":null,"properties":[{"name":"isSideNavOpen","type":{"names":["boolean"]},"description":"<p>whether the navigation sidebar is open</p>","optional":null,"defaultvalue":""},{"name":"isOutboundDialerOpen","type":{"names":["boolean"]},"description":"<p>whether the navigation sidebar is open</p>","optional":null,"defaultvalue":""},{"name":"activeView","type":{"names":["string"]},"description":"<p>name of the currently active view</p>","optional":true,"defaultvalue":""},{"name":"selectedTaskSid","type":{"names":["string"]},"description":"<p>ID of the selected task in Agent Desktop view</p>","optional":true,"defaultvalue":""},{"name":"selectedTaskInSupervisorSid","type":{"names":["string"]},"description":"<p>ID of the selected task in Teams view</p>","optional":true,"defaultvalue":""},{"name":"selectedWorkerInSupervisorSid","type":{"names":["string"]},"description":"<p>ID of the selected worker in Teams view</p>","optional":true,"defaultvalue":""},{"name":"isDirectoryOpen","type":{"names":["boolean"]},"description":"<p>whether the call transfer panel is open in Agent Desktop view</p>","optional":true,"defaultvalue":""},{"name":"componentViewStates","type":{"names":["object"]},"description":"<p>object containing persistent components states. Use {@link Actions.SetComponentState} to update.</p>","optional":null,"defaultvalue":""}],"params":null,"returns":null},{"name":"WorkerState","docName":null,"longname":"WorkerState","description":"<p>Worker state based on Worker SDK</p>","defaultvalue":null,"type":null,"properties":[{"name":"tasks","type":{"names":["Map<string, ITask>"]},"description":"<p>map of active tasks by reservation SID</p>","optional":null,"defaultvalue":""},{"name":"activity","type":{"names":["Activity"]},"description":"<p>current <a href=\"https://twilio.github.io/twilio-taskrouter.js/Activity.html\">Activity</a> of the worker.</p>","optional":null,"defaultvalue":""},{"name":"activities","type":{"names":["Map<string, Activity>"]},"description":"<p>map of all <a href=\"https://twilio.github.io/twilio-taskrouter.js/Activity.html\">Activities</a> instances by SID.</p>","optional":null,"defaultvalue":""},{"name":"attributes","type":{"names":["object"]},"description":"<p>attributes of the <a href=\"https://twilio.github.io/twilio-taskrouter.js/Worker.html\">Worker</a>.</p>","optional":null,"defaultvalue":""},{"name":"worker","type":{"names":["IWorker"]},"description":"<p>current worker instance.</p>","optional":null,"defaultvalue":""}],"params":null,"returns":null},{"name":"FlexState","docName":null,"longname":"FlexState","description":null,"defaultvalue":null,"type":null,"properties":[{"name":"flex","type":{"names":["AppState"]},"description":"<p>Flex application state</p>","optional":null,"defaultvalue":""}],"params":null,"returns":null},{"name":"ChatTaskChannelConfiguration","docName":null,"longname":"ChatTaskChannelConfiguration","description":"<p>Interface to define an object with the parameters needed to configure a Chat Task Channel</p>","defaultvalue":null,"type":null,"properties":[{"name":"name","type":{"names":["string"]},"description":"<p>name of the task channel definition</p>","optional":null,"defaultvalue":""},{"name":"isApplicable","type":{"names":["TaskChannelDefinition.TaskChannelApplicableCb"]},"description":"<p>Callback to determine whether this task channel is applicable for a given task.</p>","optional":null,"defaultvalue":""},{"name":"icon","type":{"names":["string","React.ReactNode"]},"description":"<p>main icon to render for the task channel</p>","optional":true,"defaultvalue":""},{"name":"iconActive","type":{"names":["string","React.ReactNode"]},"description":"<p>active icon to render for the task channel</p>","optional":true,"defaultvalue":""},{"name":"color","type":{"names":["string"]},"description":"<p>main color to be used</p>","optional":true,"defaultvalue":""},{"name":"reservedTemplate","type":{"names":["string"]},"description":"<p>template string for pending chat request</p>","optional":true,"defaultvalue":""},{"name":"charLimit","type":{"names":["number"]},"description":"<p>message character limit for task channel with chat capabilities</p>","optional":true,"defaultvalue":""},{"name":"taskHeaderAcceptedTemplate","type":{"names":["string"]},"description":"<p>template string for chat task in accepted state</p>","optional":true,"defaultvalue":""},{"name":"taskLineChatAssignedTemplate","type":{"names":["string"]},"description":"<p>template string for an assigned chat task</p>","optional":true,"defaultvalue":""},{"name":"taskLineChatWrapupTemplate","type":{"names":["string"]},"description":"<p>template string for an wrapping up chat task</p>","optional":true,"defaultvalue":""},{"name":"notificationTitleTemplate","type":{"names":["string"]},"description":"<p>template string for in-app notification title of chat task</p>","optional":true,"defaultvalue":""},{"name":"browserNotificationTitleTemplate","type":{"names":["string"]},"description":"<p>template string for browser notification title of chat task</p>","optional":true,"defaultvalue":""},{"name":"browserNotificationBodyTemplate","type":{"names":["string"]},"description":"<p>template string for browser notification body of chat task</p>","optional":true,"defaultvalue":""},{"name":"contentTabHeaderTemplate","type":{"names":["string"]},"description":"<p>template string for header of content tab for chat tasks</p>","optional":true,"defaultvalue":""},{"name":"endButtonTemplates","type":{"names":["Record<string, any>"]},"description":"<p>template strings for button to end chat task</p>","optional":true,"defaultvalue":""}],"params":null,"returns":null},{"name":"NotificationHandler","docName":null,"longname":"NotificationHandler","description":"<p>Notification Handler interface.</p>","defaultvalue":null,"type":null,"properties":[],"params":null,"returns":null},{"name":"ButtonThemeProps","docName":null,"longname":"Theme.ButtonThemeProps","description":null,"defaultvalue":null,"type":null,"properties":[{"name":"disabledColor","type":{"names":["string"]},"description":"<p>Use the disabled color</p>","optional":true,"defaultvalue":""},{"name":"lightHover","type":{"names":["boolean"]},"description":"<p>Use the light hover effect</p>","optional":true,"defaultvalue":""},{"name":"disabledColor","type":{"names":["string"]},"description":"<p>Use the disabled color</p>","optional":true,"defaultvalue":""},{"name":"lightHover","type":{"names":["boolean"]},"description":"<p>Use the light hover effect</p>","optional":true,"defaultvalue":""}],"params":null,"returns":null}]}},"pageContext":{"name":"context-providers","docName":"Context Providers"}},
    "staticQueryHashes": ["2573139180","3167116022","426031883"]}