Description of icon
Flex UI
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

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(child, options) => CleanupFunction#

Replaces a fragment with the given child by matching the fragment's key

Parameters:

  • child: React.ReactElement

    new child that will replace an existing fragment

  • options: DynamicContentStore.ContentFragmentProps

    options of the new child

    • 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.

Returns:

  • CleanupFunction

    callback when executed removes the replaced component

Example:

ComponentName.Content.replace(Component, options);

Need some help?