Foreign Components
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
children
(Optional)
Type: ReactNode
on
Ref (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