@obosbbl/grunnmuren-react 2.0.0-canary.4 → 2.0.0-canary.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +122 -10
  2. package/dist/index.d.mts +640 -29
  3. package/dist/index.mjs +786 -192
  4. package/package.json +5 -3
  5. package/dist/useClientLayoutEffect-client-2_5nawgR.js +0 -9
package/README.md CHANGED
@@ -14,20 +14,35 @@ npm install @obosbbl/grunnmuren-react@canary
14
14
  pnpm add @obosbbl/grunnmuren-react@canary
15
15
  ```
16
16
 
17
- ## Localization configuration
17
+ ## Setup
18
+
19
+ ### Internationalization
18
20
 
19
21
  Grunnmuren uses [React Aria Components](https://react-spectrum.adobe.com/react-aria/) under the hood. RAC has built in translation strings for non visible content (for accessibility reasons). It also automatically detects the language based on the browser or system language.
20
22
 
21
- To ensure that the language of the page content matches the accessibility strings you should wrap your application in a `I18nProvider`. This will override RAC's automatic locale selection.
23
+ To ensure that the language of the page content matches the accessibility strings you must wrap your application in a `GrunnmurenProvider` with a `locale` prop. This will override RAC's automatic locale selection.
22
24
 
23
- In [Next.js](https://nextjs.org/) you can do this in the root [root layout](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required).
25
+ In [Next.js](https://nextjs.org/) you can do this in the root [root layout](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required). In order to avoid making `RootLayout` a client component, you should import `GrunnmurenProvider` in a providers-file, that uses `"use client"`
24
26
 
25
- Valid locales for Norwegian are `nb-NO` or `nb`, Swedish is `sv-SE` or `sv`.
27
+ Valid locales are `nb`, `sv` or `en`. The provider defaults to `nb` if unspecified.
26
28
 
27
29
  ```js
28
- // app/layout.tsx
29
- import { I18nProvider } from '@obosbbl/grunnmuren-react';
30
+ // app/providers.tsx
31
+ 'use client'
32
+ import { GrunnmurenProvider } from '@obosbbl/grunnmuren-react';
33
+
34
+ export function Providers({children, locale}: { children: React.ReactNode, locale: 'nb' | 'sv' | 'en'}) {
35
+
36
+ return (
37
+ <GrunnmurenProvider locale={locale}>
38
+ {children}
39
+ </GrunnmurenProvider>
40
+ )
41
+ }
42
+ ```
30
43
 
44
+ ```js
45
+ // app/layout.tsx
31
46
 
32
47
  export default function RootLayout({
33
48
  children,
@@ -35,21 +50,118 @@ export default function RootLayout({
35
50
  children: React.ReactNode
36
51
  }) {
37
52
 
38
- // Either 'nb' or 'sv'
53
+ // Either 'nb', 'sv' or 'en'
39
54
  const locale = 'nb';
40
55
 
41
56
  return (
42
- <I18nProvider locale={locale}>
57
+ <Providers locale={locale}>
43
58
  <html lang={locale}>
44
59
  <body>{children}</body>
45
60
  </html>
46
- </I18nProvider>
61
+ </Providers>
47
62
  )
48
63
  }
49
64
  ```
50
65
 
51
66
  See the [RAC internationalization docs](https://react-spectrum.adobe.com/react-aria/internationalization.html) for more information.
52
67
 
68
+ ### Routing
69
+
70
+ When using compontents that include links from RAC (For example `Breadcrumbs`), the links will always treat the hrefs as external.
71
+
72
+ In order to avoid hard refreshing, you need to prop your router navigation-function
73
+ through `GrunnmurenProvider`. See the [RAC routing docs](https://react-spectrum.adobe.com/react-aria/routing.html)
74
+
75
+ In [Next.js](https://nextjs.org/) this is also done in the root [root layout](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required). In order to avoid making `RootLayout` a client component, you should import `GrunnmurenProvider` in a providers-file, that uses `"use client"`
76
+
77
+ ```js
78
+ // app/providers.tsx
79
+ 'use client'
80
+ import { GrunnmurenProvider } from '@obosbbl/grunnmuren-react';
81
+ import { useRouter } from 'next/navigation';
82
+
83
+ export function Providers({children, locale}: { children: React.ReactNode, locale: string}) {
84
+ const router = useRouter();
85
+
86
+ return (
87
+ <GrunnmurenProvider locale={locale} navigate={router.push}>
88
+ {children}
89
+ </GrunnmurenProvider>
90
+ )
91
+ }
92
+ ```
93
+
94
+ The `RootLayout` file then looks exactly like it does in the previous step:
95
+
96
+ ```js
97
+ // app/layout.tsx
98
+ import {Providers} from "./providers";
99
+
100
+ export default function RootLayout({
101
+ children,
102
+ }: {
103
+ children: React.ReactNode
104
+ }) {
105
+
106
+ // Either 'nb', 'sv' or 'en'
107
+ const locale = 'nb';
108
+
109
+ return (
110
+ <Providers locale={locale}>
111
+ <html lang={locale}>
112
+ <body>{children}</body>
113
+ </html>
114
+ </Providers>
115
+ )
116
+ }
117
+ ```
118
+
119
+ #### Basepath
120
+
121
+ If you're using a router such as Next's, then you can use the `useHref` prop to convert router-specific hrefs into native HTML hrefs. This is very useful for instance when using Next's [basepath](https://nextjs.org/docs/app/api-reference/next-config-js/basePath) setting, as you can use this to prepend the basepath to all links, similar to Next's `<Link>`.
122
+
123
+ **Before**
124
+
125
+ ```tsx
126
+ import Link from 'next/link';
127
+ import { Button } from '@obosbbl/grunnmuren-react';
128
+
129
+ // Notice how you have to handle the basepath yourself with Grunnmuren's component, but not with Next's.
130
+
131
+ <Link href="/bli-medlem">Bli medlem</Link>
132
+ <Button href="/medlem/bli-medlem">Bli medlem</Button>
133
+ ```
134
+
135
+ **After**
136
+
137
+ ```js
138
+ // app/providers.tsx
139
+ 'use client'
140
+ import { GrunnmurenProvider } from '@obosbbl/grunnmuren-react';
141
+ import { useRouter } from 'next/navigation';
142
+
143
+ export function Providers({children, locale}: { children: React.ReactNode, locale: string}) {
144
+ const router = useRouter();
145
+ const useHref = (href: string) => '/medlem' + href;
146
+
147
+ return (
148
+ <GrunnmurenProvider locale={locale} navigate={router.push} useHref={useHref}>
149
+ {children}
150
+ </GrunnmurenProvider>
151
+ )
152
+ }
153
+ ```
154
+
155
+ ```tsx
156
+ import Link from 'next/link';
157
+ import { Button } from '@obosbbl/grunnmuren-react';
158
+
159
+ // The hrefs are the same, as basepath is handled by the useHref hook in the provider.
160
+
161
+ <Link href="/bli-medlem">Bli medlem</Link>
162
+ <Button href="/bli-medlem">Bli medlem</Button>
163
+ ```
164
+
53
165
  ### Optimize bundle size by removing unused locales
54
166
 
55
167
  React Aria Components has built in support for over 30 languages, most of which will be unused in your application. To optimize your applications bundle size, it is recommended to use React Aria's build plugin to remove all the unused locales. Here is a quick example for Next.js:
@@ -76,7 +188,7 @@ module.exports = {
76
188
  optimizeLocales.webpack({
77
189
  // If you have a multitenant app, include both Norwegian and Swedish
78
190
  // If your app only serves one language, adjust accordingly
79
- locales: ['nb-NO', 'sv-SE'],
191
+ locales: ['nb', 'sv'],
80
192
  }),
81
193
  );
82
194
  return config;