Installation

Requirements:

• React 18.2 or later - react
• React DOM 18.2 or later - react-dom

Installing the package

Start using AndrejGround Lab now by installing it as an NPM package.

Install

Run one of the following commands in your terminal:

npm

npm install @andrejground/lab

pnpm

pnpm install @andrejground/lab

Yarn

yarn add @andrejground/lab

Import the styles

Add the following line to the root of your app:

App.tsx

import '@andrejground/lab/style.css';

Use the components

Add your styles and your component is ready to be used.

App.tsx

import MyPopover from './MyPopover';
// ...
return (
  <MyPopover>
    <MyPopover.Trigger>Popover Trigger</MyPopover.Trigger>
    <MyPopover.Content>Popover Content</MyPopover.Content>
  </MyPopover>
);

MyPopover.tsx

import { Popover, PopoverProps } from '@andrejground/lab';
import React from 'react';
import styles from './MyPopover.module.scss';

type Props = PopoverProps;

function MyPopover(props: Props) {
  return (
    <Popover
      {...props}
      classNames={{
        content: styles.popoverContent,
      }}
    />
  );
}

MyPopover.Content = Popover.Content;
MyPopover.Trigger = Popover.Trigger;

export default MyPopover;

MyPopover.module.scss

.popoverContent {
  background-color: var(--background-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

Frameworks

AndrejGround Lab is compatible with your preferred framework.

Next.js

All the components and hooks already include the "use client" directive, which means you can import and use them directly in your RSC.

Astro

In Astro, you can use the client:load or client:only directives for your React components - meaning they'll only run in the browser.

MyComponent.astro

<MyPopover client:load>
  <MyPopover.Trigger>Popover Trigger</MyPopover.Trigger>
  <MyPopover.Content>Popover Content</MyPopover.Content>
</MyPopover>