Composition
React Suite has always been looking for a balance between the flexibility and simplicity of components, making component packaging as simple and flexible as possible.
Component prop
as prop
All UI components in React Suite provide an as prop to change the root element to be rendered.
return (
<>
{/* Will output: <header class="rs-header" /> */}
<Header />
{/* Uses div tag: <div class="rs-header" /> */}
<Header as="div" />;
</>
);Unhandled props & DOM attributes
Our component only processes the prop defined in its propTypes, all unprocessed prop will be passed to the root element of the component. This means that all components support all HTML DOM attributes.
return (
<>
<Input tabIndex={1} onFocus={e => console.log(e)} />
</>
);Third-party routing library
The navigation component of React Suite supports the as prop, which is used to receive the component type of a third-party routing library. Included components: Dropdown, Breadcrumb, Nav.
next/link
import Link from 'next/link';
const NavLink = React.forwardRef(({ href, as, ...rest }, ref) => (
<Link href={href} as={as}>
<a ref={ref} {...rest} />
</Link>
));
return (
<Nav.Item as={NavLink} href="/">
Home
</Nav.Item>
);react-router-dom
import { Link } from 'react-router-dom';
const NavLink = React.forwardRef(({ href, children, ...rest }, ref) => (
<Link ref={ref} to={href} {...rest}>
{children}
</Link>
));
return (
<Nav.Item as={NavLink} href="/">
Home
</Nav.Item>
);Precautions
Caveat with refs
Some components need to access the DOM node, which was previously achieved by using ReactDOM.findDOMNode, but this method has been deprecated and replaced with ref. When the component needs to be encapsulated, the ref needs to be passed to the encapsulated component through React.forwardRef, otherwise the following error will occur:
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?Example of custom Popover:
- const CustomPopover = ()=>(
+ const CustomPopover = React.forwardRef((props, ref) => (
<div>
<Popover ref={ref} {...props}>
content
</Popover>
</div>
));
return <Whisper speaker={<CustomPopover />}>open</Whisper>;