@obosbbl/grunnmuren-react NPM

@obosbbl/grunnmuren-react

Grunnmuren React components.

Install

# npm
npm install @obosbbl/grunnmuren-react@canary

# pnpm
pnpm add @obosbbl/grunnmuren-react@canary

Setup

Internationalization

Grunnmuren uses React Aria Components 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.

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.

In Next.js you can do this in the root root layout. In order to avoid making RootLayout a client component, you should import GrunnmurenProvider in a providers-file, that uses "use client"

Valid locales are nb, sv or en. The provider defaults to nb if unspecified.

// app/providers.tsx
'use client'
import { GrunnmurenProvider } from '@obosbbl/grunnmuren-react';

export function Providers({children, locale}: { children: React.ReactNode, locale: 'nb' | 'sv' | 'en'}) {

  return (
    <GrunnmurenProvider locale={locale}>
      {children}
    </GrunnmurenProvider>
  )
}

// app/layout.tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {

  // Either 'nb', 'sv' or 'en'
  const locale = 'nb';

  return (
    <Providers locale={locale}>
      <html lang={locale}>
        <body>{children}</body>
      </html>
    </Providers>
  )
}

See the RAC internationalization docs for more information.

Routing

When using compontents that include links from RAC (For example Breadcrumbs), the links will always treat the hrefs as external.

In order to avoid hard refreshing, you need to prop your router navigation-function through GrunnmurenProvider. See the RAC routing docs

In Next.js this is also done in the root root layout. In order to avoid making RootLayout a client component, you should import GrunnmurenProvider in a providers-file, that uses "use client"

// app/providers.tsx
'use client'
import { GrunnmurenProvider } from '@obosbbl/grunnmuren-react';
import { useRouter } from 'next/navigation';

export function Providers({children, locale}: { children: React.ReactNode, locale: string}) {
  const router = useRouter();

  return (
    <GrunnmurenProvider locale={locale} navigate={router.push}>
      {children}
    </GrunnmurenProvider>
  )
}

The RootLayout file then looks exactly like it does in the previous step:

// app/layout.tsx
import {Providers} from "./providers";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {

  // Either 'nb', 'sv' or 'en'
  const locale = 'nb';

  return (
    <Providers locale={locale}>
      <html lang={locale}>
        <body>{children}</body>
      </html>
    </Providers>
  )
}

Basepath

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 setting, as you can use this to prepend the basepath to all links, similar to Next's <Link>.

Before

import Link from 'next/link';
import { Button } from '@obosbbl/grunnmuren-react';

// Notice how you have to handle the basepath yourself with Grunnmuren's component, but not with Next's.

<Link href="/bli-medlem">Bli medlem</Link>
<Button href="/medlem/bli-medlem">Bli medlem</Button>

After

// app/providers.tsx
'use client'
import { GrunnmurenProvider } from '@obosbbl/grunnmuren-react';
import { useRouter } from 'next/navigation';

export function Providers({children, locale}: { children: React.ReactNode, locale: string}) {
  const router = useRouter();
  const useHref = (href: string) => '/medlem' + href;

  return (
    <GrunnmurenProvider locale={locale} navigate={router.push} useHref={useHref}>
      {children}
    </GrunnmurenProvider>
  )
}

import Link from 'next/link';
import { Button } from '@obosbbl/grunnmuren-react';

// The hrefs are the same, as basepath is handled by the useHref hook in the provider.

<Link href="/bli-medlem">Bli medlem</Link>
<Button href="/bli-medlem">Bli medlem</Button>

Optimize bundle size by removing unused locales

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:

Install

# npm
npm install @react-aria/optimize-locales-plugin --save-dev

# pnpm
pnpm add -D @react-aria/optimize-locales-plugin

Configuration

// next.config.js
const optimizeLocales = require('@react-aria/optimize-locales-plugin');

module.exports = {
  webpack(config) {
    config.plugins.push(
      optimizeLocales.webpack({
        // If you have a multitenant app, include both Norwegian and Swedish
        // If your app only serves one language, adjust accordingly
        locales: ['nb', 'sv'],
      }),
    );
    return config;
  },
};

The plugin works with several different bundlers. See React Aria's bundle size optimization docs for more information.

Usage

Before you start using the components you need to configure the Tailwind preset. Remember to add this package to the content scan.

import { Button } from '@obosbbl/grunnmuren-react';

export default function () {
  return <Button>Click me</Button>;
}

@obosbbl/grunnmuren-icons-react @react-aria/form @react-aria/interactions @react-aria/utils @react-stately/form @react-stately/utils @types/node cva react-aria react-aria-components react-stately use-debounce

@infinitebrahmanuniverse/nolb-_ob @everything-registry/sub-chunk-675

6 months ago

6 months ago

5 months ago

7 months ago

5 months ago

5 months ago

5 months ago

5 months ago

9 months ago

10 months ago

8 months ago

9 months ago

8 months ago

5 months ago

8 months ago

8 months ago

8 months ago

8 months ago

7 months ago

8 months ago

7 months ago

5 months ago

11 months ago

11 months ago

11 months ago

10 months ago

10 months ago

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago