Description of icon
API Reference

Add / Replace / Remove Methods

Flex UI is a library of programmable or dynamic components that expose a Content property and allows you to add, replace and remove any component and its children. This can be done by using add, replace and remove methods with options.


Example:

// MyComponentImpl.tsx
import { DynamicContentStore, DynamicComponent } from "@twilio/flex-ui";
export const displayName = "MyComponent";
export const contentStore = new DynamicContentStore(displayName);
export class MyComponentImpl extends React.PureComponent {
// …
render() {
return (
<DynamicComponent
store={contentStore}
// ..

add(child, options) => CleanupFunction#

Adds a new child fragment

Parameters:

  • child: React.ReactElement<any>

    child to add

  • options: DynamicContentStore.ContentFragmentProps

    options of the child to add

    • align?: ContentFragmentAlignment - fragment alignment
    • replace?: boolean - whether the fragment should replace an existing one or not. Always set to true when calling replace method from DynamicContentStore.
    • sortOrder?: number - index in which to position the fragment within the component.
    • if?: (props) => boolean - function that returns whether the content fragment should be added or replaced.
      • props: object - props T of the Component that includes the static prop named Content of type DynamicContentStore
      • boolean - whether the content fragment should be either added/replaced/removed or not
    • noChildProps?: boolean - whether the fragment should be rendered with props that other siblings was rendered with

Returns:

  • CleanupFunction

    callback when executed removes the added component

Example:

ComponentName.Content.add(Component, options);

remove(key, options) => CleanupFunction#

Removes an existing child fragment

Parameters:

  • key: React.Key

    key that identifies the fragment to remove

  • options: RemoveComponentCallOptions

    options of the child to remove

    • if?: (props) => boolean - function that returns whether the component should be removed or not.
      • props: object - props T of the Component that includes the static prop named Content of type DynamicContentStore
      • boolean - whether the content fragment should be either added/replaced/removed or not

Returns:

  • CleanupFunction

    callback to undo remove request

Example:

ComponentName.Content.remove(componentKey, options);

replace(customComponent, options) => CleanupFunction#

Replaces the entire programmable component with the provided custom component.

Parameters:

  • customComponent: React.ReactElement

    new custom component that will replace an existing fragment

  • options: DynamicContentStore.ContentFragmentProps

    options of the new custom component

    • align?: ContentFragmentAlignment - fragment alignment
    • replace?: boolean - whether the fragment should replace an existing one or not. Always set to true when calling replace method from DynamicContentStore.
    • sortOrder?: number - index in which to position the fragment within the component.
    • if?: (props) => boolean - function that returns whether the content fragment should be added or replaced.
    • noChildProps?: boolean - whether the fragment should be rendered with props that other siblings was rendered with

Returns:

  • CleanupFunction

    callback when executed removes the replaced component

Example:

ComponentName.Content.replace(Component, options);

addWrapper(wrapper) => unknown#

Replace a Flex component with a custom component which is able to render the original component and has access to all its original properties

Parameters:

  • wrapper: ComponentWrapper

    the custom wrapper component which can augment or replace the original component, and access/modify all original props

Example:

ComponentName.Content.addWrapper(ComponentWrapper);