Logo

Superkey

0.2.2

šŸ“€ Usage with Remix

Install Superkey in a Remix project.

1. Create a new Remix project:

npx create-remix@latest
cd my-app

2. Install Superkey:

npm install superkey @headlessui/react

3. Add in remix.config.js:

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  serverBuildTarget: "vercel",
  server: process.env.NODE_ENV === "development" ? undefined : "./server.js",
  ignoredRouteFiles: ["**/.*"],
  serverDependenciesToBundle: ["superkey"],
  // your other config...
};

4. Add Superkey styles in entry.client.tsx:

import { RemixBrowser } from "@remix-run/react";
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";

import "superkey/styles.css";

function hydrate() {
  startTransition(() => {
    hydrateRoot(
      document,
      <StrictMode>
        <RemixBrowser />
      </StrictMode>
    );
  });
}

if (window.requestIdleCallback) {
  window.requestIdleCallback(hydrate);
} else {
  window.setTimeout(hydrate, 1);
}

5. Add Superkey styles in root.tsx:

import type { MetaFunction, LinksFunction } from "@remix-run/node";
import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

import styles from "superkey/styles.css";

export const links: LinksFunction = () => {
  return [{ rel: "stylesheet", href: styles }];
};

export const meta: MetaFunction = () => ({
  charset: "utf-8",
  title: "New Remix App",
  viewport: "width=device-width,initial-scale=1",
});

export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

6. Create component:

import { useState } from "react";
import { Command, CommandInput, CommandList, CommandOption } from "superkey";

function App() {
  const [open, setOpen] = useState(false);
  return (
    <Command
      open={open}
      onClose={() => {
        setOpen(false);
      }}
    >
      <CommandInput
        onChange={(e) => {
          console.log(e.target.value);
        }}
      />
      <CommandList>
        <CommandOption value="Option 1">
          <h1>With Remix āœØ</h1>
          <p>Description</p>
        </CommandOption>
      </CommandList>
    </Command>
  );
}

7. Run your project:

npm run dev

šŸ„³ Ready.