Package Exports

zolastic-component-library-experiment
zolastic-component-library-experiment/dist/index.js
zolastic-component-library-experiment/dist/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (zolastic-component-library-experiment) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Zolastic Component Library Experiment

This is a component library created for learning purposes. It includes a variety of reusable components that can be used in your React projects.

NPM

You can find this package on npm here.

GitHub

You can find the source code for this package on GitHub here.

Installation

To install the library, you can use npm:

npm install zolastic-component-library-experiment

Usage

After installation, you can import the components from the library like this:

import { Button } from 'zolastic-component-library-experiment';

Then, you can use the components in your React components:

const MyComponent = () => {
  return <Button label="Click me" />;
};

Importing Component Styles

To ensure the styling of the components in Zolastic Component Library Experiment works correctly, you need to import the provided CSS file into your project.

import "zolastic-component-library-experiment/dist/index.css";

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import "zolastic-component-library-experiment/dist/index.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

Components

Currently, the library includes the following components:

Button
Select
More components will be added in the future.

Select Component

Normal Select

import React from "react";

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "zolastic-component-library-experiment";

const SelectDemo = () => {
  return (
    <Select>
      <SelectTrigger className="w-[180px]">
        <SelectValue placeholder="Theme" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="light">Light</SelectItem>
        <SelectItem value="dark">Dark</SelectItem>
        <SelectItem value="system">System</SelectItem>
      </SelectContent>
    </Select>
  );
};

export default SelectDemo;

Select with TanStack Virtual

import React from "react";

import {
  Select,
  SelectContentTanStackVirtual,
  SelectTrigger,
  SelectValue,
} from "zolastic-component-library-experiment";

const SelectTanStackVirtualDemo = () => {
  const data = Array.from({ length: 15 }, (_, i) => ({
    label: `Option ${i + 1}`,
    value: `option-${i + 1}`,
  }));

  return (
    <Select>
      <SelectTrigger className="w-[180px]">
        <SelectValue placeholder="Options" />
      </SelectTrigger>
      <SelectContentTanStackVirtual data={data} />
    </Select>
  );
};

export default SelectTanStackVirtualDemo;

Contributing

As this is a learning project, contributions are not currently being accepted. However, you're welcome to fork the project and make your own modifications.