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.tsximport { 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.ContentFragmentPropsoptions of the child to add
align?: ContentFragmentAlignment- fragment alignmentreplace?: boolean- whether the fragment should replace an existing one or not. Always set to true when callingreplacemethod 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 DynamicContentStoreboolean- whether the content fragment should be either added/replaced/removed or notnoChildProps?: boolean- whether the fragment should be rendered with props that other siblings was rendered with
Returns:
CleanupFunctioncallback when executed removes the added component
Example:
ComponentName.Content.add(Component, options);remove(key, options) => CleanupFunction#
Removes an existing child fragment
Parameters:
key: React.Keykey that identifies the fragment to remove
options: RemoveComponentCallOptionsoptions 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 DynamicContentStoreboolean- whether the content fragment should be either added/replaced/removed or not
Returns:
CleanupFunctioncallback 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.ReactElementnew custom component that will replace an existing fragment
options: DynamicContentStore.ContentFragmentPropsoptions of the new custom component
align?: ContentFragmentAlignment- fragment alignmentreplace?: boolean- whether the fragment should replace an existing one or not. Always set to true when callingreplacemethod 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:
CleanupFunctioncallback 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: ComponentWrapperthe custom wrapper component which can augment or replace the original component, and access/modify all original props
Example:
ComponentName.Content.addWrapper(ComponentWrapper);