ForeignComponents

How to get ForeignComponents

import { ForeignComponents } from 'fds/components';

Type: Component

Use this component to wrap foreign (non-FDS) components when using them in an FDS-based application. This will ensure that things like focus behave as expected and properly interact with FDS components.

By default, this renders a block-level div element to wrap the component's children. Any props passed to this component are applied to the div. In cases where you need an inline foreign component, for instance, use something like:

<ForeignComponents style={{ display: 'inline' }}>
    <MyComponent />
</ForeignComponents>

Props

# Name Type Description
1. [children] ReactNode
2. [onRef] Function

A callback that is called whenever a component's ref changes.

Use this callback to get a ref to (the domNode of) a component. There shouldn't be many usecases for using this prop yourself, but you might have to implement it with a given argument from a render callback somewhere.

For more information about React and "refs", check the React documentation


  Arguments
# Name Type Description
1. domNode HTMLElement

The domNode on which the component placed its ref callback attribute.

  Returns

Type: void

Was this page helpful?