Get Started

Astro islands can run in a variety of configurations, and not all of them run only in the browser. If you want to guard certain parts of your code running in a certain environment, you can use is-land to check where you are.

This can be accomplished by checking if the window exists. If it does, you are in the browser. If it doesn’t, you are on the server.

if (!!globalThis.window) console.log('You are in the browser')
else console.log('You are on the server')

Installation

Fine, you still want to use the package? Open the terminal and install is-land with your favourite package manager.

npm

npm i is-land

yarn

yarn add is-land

pnpm

pnpm add is-land

Usage

Import the function in your framework component, and use as a check.

MyIsland.tsx

import isLand from 'is-land'

export default function MyIsland() {
  if (isLand()) console.log('You are on the client')
  else console.log('You are on the server')

  return (
    <>
      <h1>Hello world!</h1>
      <p>See the console for a message.</p>
    </>
  )
}

You can import the function using a handful of names.

import { island } from 'is-land'
import { isLand } from 'is-land'
import { is_land } from 'is-land'
import isLand from 'is-land'