[NoSSR] Port the component from legacy Base UI #593
Conversation
michaldudak
added
new feature
Netlify deploy preview |
| namespace NoSsr { | ||
| export interface Props { |
There was a problem hiding this comment.
Is this a new pattern? How can people extend the NoSsr prop now?
There was a problem hiding this comment.
Yes, we decided to go with this pattern. See the rationale in #517. The interface should be extendable the same way as without the namespace.
| @@ -1,6 +1,6 @@ | |||
| --- | |||
| productId: base-ui | |||
| title: No SSR React component | |||
| title: No-SSR React component | |||
| description: The No-SSR component defers the rendering of children components from the server to the client. | |||
| components: NoSsr | |||
| --- | |||
There was a problem hiding this comment.
To apply No-SSR below as well for the h1 of the docs page, no?
There was a problem hiding this comment.
I don't know which one is more correct TBH. @colmtuite, @atomiks, could you chime in?
| import { NoSsr } from '@base_ui/react/NoSsr'; | ||
| import { Box } from '@mui/system'; | ||
|
|
||
| export default function SimpleNoSsr() { | ||
| return ( | ||
| <div> |
There was a problem hiding this comment.
How about we freeze the height on these demos?
| <div> | |
| <Box sx={{ height: … }}> |
It layout shifts otherwise when loading the demo page. It's annoying, anchor links to ids below this demo don't work well.
| </NoSsr> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| const Panel = styled('div')` |
There was a problem hiding this comment.
Nice, I love how it makes the .preview much easier to follow.
Took the NoSSR component from the legacy package, described and published it.
Preview: https://deploy-preview-593--base-ui.netlify.app/components/react-no-ssr/