Utils

Hooks

useMediaQuery

Brukes for å sjekke om ett eller flere media queries er aktive eller ikke.

Import

import { useMediaQuery } from "@aneo-org/design-react/clientComponents";

Returverdi

Hooken gir tilbake en Array<boolean> hvor hvert element korresponderer til en media query sendt inn. Rekkefølgen på listen er lik som rekkefølgen av media queries som sendes inn.

Bruk

Denne hooken brukes for å teste om en eller flere media queries er aktive eller ikke. Den aksepterer én eller flere media queries.

function Component() {
  const [isSmallerThan500, isLargerThan800] = useMediaQuery(['(max-width: 500px)', '(min-width: 800px)']);
  
  return (
    <ul>
      <li>Mindre enn 500px: {isSmallerThan500 ? "Jepp!" : "Nope!"}</li>
      <li>Større enn 800px: {isLargerThan800 ? "Jepp!" : "Nope!"}</li>
    </ul>
  );
};

useCurrentBreakpoint

Brukes for å hente ut nåværende brekkpunkt basert på skjermstørrelse. Oppdateres automatisk hvis skjermstørrelsen endrer seg.

Import

import { useCurrentBreakpoint } from "@aneo-org/design-react/clientComponents";

Returverdi

useCurrentBreakpoint returnerer det nåværende aktive brekkpunktet. Verdien oppdateres dersom sidebredden endres. Returverdi er:

"base" | "extraSmall" | "small" | "medium" | "large" | "extraLarge"

Bruk

function Component() {
  const breakpoint = useCurrentBreakpoint();
  
  return (
    <div>Nåværende brekkpunkt: {breakpoint}</div>
  );
};

useBreakpointValue

Brukes for å hente ut en verdi basert på nåværende brekkpunkt.

Import

import { useBreakpointValue } from "@aneo-org/design-react/clientComponents";

Bruk

Hooken tar inn et objekt som inneholder verdier som argument. Objektet må ha med en base-verdi, og eventuelt et sett med andre brekkpunkt-verdier. Dersom en brekkpunkt-verdi ikke angis vil hooken regne ut nærmeste gyldige brekkpunkt.

NB! Denne funksjonen registrerer media-query lyttere hver gang den brukes, så hvis du trenger å regne ut flere verdier basert på brekkpunkt anbefales det å bruke en kombinasjon av useCurrentBreakpoint og calcBreakpointValue istedenfor å kalle denne hooken mange ganger.

function Component() {
  const value = useBreakpointValue({
    base: "0px",
    medium: "100px",
    large: "200px"
  });
  
  return (
    <div>Brekkpunkt-verdi: {value}</div>
  );
};

Returverdi

Hooken returnerer en verdi fra input-argumentet avhengig av hvilket brekkpunkt som er aktivt.

Nyttefunksjoner

calcBreakpointValue

Import

import { calcBreakpointValue } from "@aneo-org/design-react/clientComponents";

Bruk

Denne nyttefunksjonen brukes sammen med useCurrentBreakpoint for å regne ut en verdi basert på et breakpoint. Den tar inn et objekt som inneholder verdier, samt nåværende brekkpunkt, som argumenter. Objektet må ha med en base-verdi, og eventuelt et sett med andre brekkpunkt-verdier. Dersom en brekkpunkt-verdi ikke angis vil hooken returnere verdien for nærmeste gyldige brekkpunkt.

function Component() {
  const breakpoint = useCurrentBreakpoint();

  const value = calcBreakpointValue({
    base: "0px",
    medium: "100px",
    large: "200px"
  }, breakpoint);
  
  return (
    <div>Brekkpunkt-verdi: {value}</div>
  );
};

Returverdi

Funksjonen returnerer en verdi fra input-argumentet avhengig av hvilket brekkpunkt som sendes inn som argument.