ForeignComponents

Type: React component

How to get ForeignComponents?

JavaScript

import { ForeignComponents } from 'fds/components';

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:

Other

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

Props

  1. children

    (Optional)

    Type: ReactNode

  2. onRef

    (Optional)

    Type: 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

    Returns