Przejdź do głównej zawartości

Interaktywne wyspy

Kiedy importujemy do plików .astro komponenty z innych frameworków, musimy zdecydować, czy będą one przekompilowane na statyczny HTML, czy też chcemy zachować ich interaktywną formę. W drugim przypadku, pomogą nam Astro Islands, czyli wyspy!

Counter jako wyspa​

Aby zrozumieć jak dziąła taka wyspa, spróbujemy zaimplementować prosty componenty typu Counter w React.js.

Implementacja​

  • plik /src/components/Counter.tsx
import { useState } from "react"

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div className="row">
      <div className="col text-center mx-auto pt-5 pb-5">
        <h1>
          <strong>{count}</strong>
        </h1>
        <h2>✨ Website rating ✨</h2>
        <div className="btn-group btn-group-lg">
          <button type="button" className="btn btn-danger"
            onClick={() => setCount(count - 1)}>
            -1
          </button>
          <button type="button" className="btn btn-success"
            onClick={() => setCount(count + 1)}>
            +1
          </button>
        </div>
      </div>
    </div>
  )
}

export default Counter;
  • w pliku /src/pages/index.astro
import Counter from "../components/Counter.tsx";

// ...

<Counter />

Coś się popsuło... Czas na dyrektywę​

  <Counter client:load/>
  <Counter client:visible/>

Dlaczego nazywa się to wyspą?​

Kiedy cała strona została przetworzona na HTML, interaktywny komponent pośrodku niej przypomina wyspę.

Inne rodzaje dyrektyw sterujących wyspami​

  • client:visible - wczytuje JS kiedy komponent jest widoczny w ViewPorcie
  • client:idle - wczytuje JS kiedy strona jest już załadowana do przeglądarki
  • client:media - wczytuje JS kiedy zadane media query zostanie spełnione np. client:media="(max-width: 50em)"