Skip to content

Commit ca97dc8

Browse files
authored
feat: add SSRProvider (react-bootstrap#6031)
1 parent d3cae8d commit ca97dc8

File tree

4 files changed

+28
-0
lines changed

4 files changed

+28
-0
lines changed

src/SSRProvider.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { SSRProvider } from '@restart/ui/ssr';
2+
import type { SSRProviderProps } from '@restart/ui/ssr';
3+
4+
export type { SSRProviderProps };
5+
6+
export default SSRProvider;

src/index.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,9 @@ export type { SpinnerProps } from './Spinner';
180180
export { default as SplitButton } from './SplitButton';
181181
export type { SplitButtonProps } from './SplitButton';
182182

183+
export { default as SSRProvider } from './SSRProvider';
184+
export type { SSRProviderProps } from './SSRProvider';
185+
183186
export { default as Tab } from './Tab';
184187
export type { TabProps } from './Tab';
185188

www/src/components/SideNav.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@ const gettingStarted = [
105105
'theming',
106106
'support',
107107
'rtl',
108+
'server-side-rendering',
108109
];
109110

110111
const layout = ['grid'];
@@ -160,6 +161,7 @@ const nameOverrides = {
160161
'why-react-bootstrap': 'Why React-Bootstrap',
161162
rtl: 'RTL',
162163
'restart-ui': '@restart/ui',
164+
'server-side-rendering': 'Server-side Rendering',
163165
};
164166

165167
function NavSection({ heading, location: { pathname }, items, path }) {
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Server-side Rendering
2+
3+
React-Bootstrap automatically generates an `id` for some
4+
components (such as `DropdownToggle`) if they are not provided.
5+
This is done for accessibility purposes.
6+
7+
In server-side rendered applications, a `SSRProvider` must wrap
8+
the application in order to ensure that the auto-generated ids
9+
are consistent between the server and client.
10+
11+
```
12+
import SSRProvider from 'react-bootstrap/SSRProvider';
13+
14+
<SSRProvider>
15+
<App />
16+
</SSRProvider>
17+
```

0 commit comments

Comments
 (0)