Setup (React)

Det skal være enkelt å komme i gang med Spor og React. Denne guiden tar deg gjennom det du må gjøre for å kunne bruke Spor i din React-applikasjon. Guiden antar at du bruker TypeScript, så ta høyde for å fjerne TypeScript-syntaks og filendinger om du bruker vanlig JavaScript.

Det aller første du må gjøre, er å installere noen avhengigheter fra NPM. Det er koden til Spor, i tillegg til noen biblioteker som Spor avhenger av.

npm install @vygruppen/spor-react
# eller
yarn add @vygruppen/spor-react

Merk at Spor (eller mer spesifikt, avhengigheten Chakra UI) ikke er kompatibel med React 18 enda. Det burde ordne seg innen kort tid.

Når du har installert avhengighetene, må du wrappe appen din i en SporProvider-komponent. Om du bruker rammeverkene Next.js eller Remix, kan du scrolle litt nedover.

Finn startfila til applikasjonen din. Om du har brukt create-react-app, vil den f.eks. være src/index.tsx. Legg SporProvider på utsiden av alle komponenter som kommer til å rendre noe til skjermen. Her er et forenklet eksempel:

import { createRoot } from "react-dom";
import App from "./App";

const root = createRoot(document.getElementById("app"));
root.render(
  <SporProvider>
    <App />
  </SporProvider>
);

Next.js er et fantastisk rammeverk for å lage React-apper som rendres på server-siden (eller via et byggsteg). For å bruke Spor må du lage en ny fil pages/_app.tsx (om du ikke har laget den alt), og wrappe applikasjonen din der i SporProvider. Her er et forenklet eksempel:

import type { AppProps } from "next/app";
import { SporProvider } from "@vygruppen/spor-react";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <SporProvider>
      <Component {...pageProps} />
    </SporProvider>
  );
}

export default MyApp;

Remix er et nytt, men spennende rammeverk som lar deg rendre React-apper på server-siden, basert på standardiserte web-APIer. Denne siden er blant annet skrevet med det!

Ulempen med Remix er at det er litt ekstra arbeid å bruke CSS-in-JS-bibliotek enn med andre rammeverk. Du kan følge denne guiden, men bytte ut ChakraProvider med SporProvider. Alternativt kan du se på hvordan vi har gjort det på denne nettsiden her.

Noen av komponentene i Spor inneholder små tekster, som "vis", "skjul", "neste" osv. Om appen din skal støtte flere språk, så kan du sende inn hvilket språk som skal brukes med å sende inn riktig språk med language-propen til SporProvider:

import { SporProvider, Language } from "@vygruppen/spor-react";

// og så senere…
<SporProvider language={Language.English}>
  ...
</SporProvider>

Du har tilgang til støttede språk via enumen Language, som du også kan importere fra samme pakke. Støttede språk er p.t. norsk (bokmål), svensk og engelsk.

Om du ikke spesifiserer et språk, velges norsk (bokmål).

Når du har fullført stegene over, kan du bruke alle komponentene i Spor. Du finner en oversikt over tilgjengelige komponenter (og dokumentasjonen deres) under "Komponenter".