Framework examples

React

import { cx } from '@micazoyolli/foundation';

export function Button({ active }: { active?: boolean }) {
  return <button className={cx('button', active && 'buttonActive')} />;
}

Next.js

Use DOM helpers only in client components.

import { getCanonicalUrl } from '@micazoyolli/foundation';

export const canonical = getCanonicalUrl('https://example.com', '/faq');

Vue

import { cx } from '@micazoyolli/foundation';

const className = computed(() => cx('panel', open.value && 'panelOpen'));

Angular

import { isNonEmptyString } from '@micazoyolli/foundation';

Astro

---
import { getCanonicalUrl } from '@micazoyolli/foundation';
const canonical = getCanonicalUrl(Astro.site?.toString() ?? '', Astro.url.pathname);
---

Node

import { buildSitemapXml } from '@micazoyolli/foundation';

await fs.writeFile('dist/sitemap.xml', buildSitemapXml(entries));