open-index/open-npm huggingface dataset:
npm package: @longxiaoxiu/antd
Description: love xiu
Latest version: 0.0.1

# longxiaoxiu

[![NPM version](https://img.shields.io/npm/v/longxiaoxiu.svg?style=flat)](https://npmjs.org/package/longxiaoxiu)
[![NPM downloads](http://img.shields.io/npm/dm/longxiaoxiu.svg?style=flat)](https://npmjs.org/package/longxiaoxiu)

love xiu

## Usage

TODO

## Options

TODO

## Development

```bash
# install dependencies
$ npm install

# develop library by docs demo
$ npm start

# build library source code
$ npm run build

# build library source code in watch mode
$ npm run build:watch

# build docs
$ npm run docs:build

# check your project for potential problems
$ npm run doctor
```

## LICENSE

MIT
npm package: @longxiaoxiu/happy-viking-ship
Description: React components library
Author: longxiaoxiu
Latest version: 1.0.4

# happy-viking-ship ant design组件库
#### 1.大家可以自由添加自己想写的组件，统一放在components文件夹下
#### 2.测试用例可以放在对应的组件文件中，目前Button组件的测试用例已经写完，可以参考
npm package: @longyarnz/flat-list
Description: Are you that type of developer that loves to write clean and sweet code for other developers to read, understand and extend without friction? Then FlatList is for you. FlatList receives an array of items and returns JSX elements computed from each item in
Author: Olalekan Ayodele
Latest version: 1.0.0

# FlatList

Are you that type of developer that loves to write clean and sweet code for other developers to read, understand and extend without friction? Then FlatList is for you. FlatList receives an array of items and returns JSX elements computed from each item in the array, without breaking your JSX flow. It eliminates the use of array map blocks in JSX and enables seamless flow in JSX.
For example, if you want to render an array of todos, you write:

```js
function RenderTodos(props) {
  return (
    <div>
      {todos.map((todo, i) => {
        return (
          <>
            <span>{todo.name}</span>
            <span>{todo.done}</span>
            <span>{todo.createdAt}</span>
            <span>{todo.cancelled}</span>
          </>
        );
      })}
    </div>
  );
}
```

Depending on your app, your use case may be more complex with lots of expresions making your JSX look messy. To make your code look cleaner and readable, you can write:

```js
function RenderForAdmin(props) {
  return (
    <div>
      <FlatList
        list={todos}
        listView={(todo, i) => {
          return (
            <>
              <span>{todo.name}</span>
              <span>{todo.done}</span>
              <span>{todo.createdAt}</span>
              <span>{todo.cancelled}</span>
            </>
          );
        }}
      />
    </div>
  );
}
```

## How to install

```sh
yarn add flat-list
```

OR

```sh
npm i flat-list
```

## How to use

```js
import { FlatList } from "flat-list";

function RenderIfAdmin(props) {
  const todos = fetchTodos();

  return (
    <FlatList
      list={todos}
      prepend={<h1>Todo App</h1>}
      append={<footer>End of Todos</footer>}
      listView={(todo, i) => {
        return (
          <>
            <span>{todo.name}</span>
            <span>{todo.done}</span>
            <span>{todo.createdAt}</span>
            <span>{todo.cancelled}</span>
          </>
        );
      }}
    />
  );
}
```

## Props

- **list**: An array of items to loop and render
- **listView**: A function that receives each element in array and renders the result
- **prepend**: An optional object/element/item that is added to the beginning of the result array
- **append**: An optional object/element/item that is added to the end of the result array
npm package: @longzai-cn/baota-api-client
Description: 基于 Typescript + Axios 的宝塔API，支持从浏览器请求（需要开启跨域支持）。
Author: Yuchen Wang
Latest version: 1.0.1

# Baota Api Client

基于 Typescript + Axios 的宝塔API，支持从浏览器请求（需要开启跨域支持）。

## References

- [baota](https://www.npmjs.com/package/baota)
- [baota-promisify](https://www.npmjs.com/package/baota-promisify)
- [PHP demo](https://www.bt.cn/api_demo_php.zip)
- [Python demo](https://www.bt.cn/api_demo_python.zip)
- [Java Demo](https://www.bt.cn/bbs/forum.php?mod=attachment&aid=MzcyNDF8YzhlNmQ1NWR8MTY5OTc5NTIxMXwwfDIwMzc2)
npm package: @lonik/oh-image
Description: A React component library for optimized image handling.
Author: Luka Onikadze
Latest version: 3.3.0

# Oh Image

[![npm](https://img.shields.io/npm/v/@lonik/oh-image)](https://www.npmjs.com/package/@lonik/oh-image)

The missing `<Image />` component for Vite and React.

For full documentation, visit [docs](https://lukonik.github.io/oh-image).

## Installation

```bash
npm install @lonik/oh-image sharp --save
```

## Usage

### 1. Register the Vite plugin

```ts
// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { ohImage } from "@lonik/oh-image/plugin";

export default defineConfig({
  plugins: [react(), ohImage()],
});
```

### 2. Use the Image component

```tsx
import { Image } from "@lonik/oh-image/react";
import heroImg from "./hero.jpg?$oh";

function App() {
  return <Image src={heroImg} alt="Hero" />;
}
```
## License

[MIT](./LICENSE)
npm package: @lonik/prestige
Description: Static Site Generator for Tanstack Start
Author: Luka Onikadze
Latest version: 0.13.1

<p align="center">
  <img src="logo.png" alt="Prestige Logo" width="150" />
</p>

<h1 align="center">Prestige</h1>

<p align="center">
  <a href="https://www.npmjs.com/package/@lonik/prestige">
    <img src="https://img.shields.io/npm/v/@lonik/prestige.svg" alt="NPM Version" />
  </a>
</p>

Prestige is a documentation framework Built on Tanstack Start,Vite,Tailwind and React

For more information, please visit our [official website](https://lukonik.github.io/prestige/).

## Usage

To get started quickly, you can bootstrap a new project using the `create-prestige` script:

```bash
npx create-prestige@latest my-docs
# or
pnpm create prestige@latest my-docs
```
npm package: @lonik/themer
Description: Theme management for TanStack Router and TanStack Start.
Author: Author Name
Latest version: 0.5.4

<div align="center">
  <h1>Themer</h1>
  <p>Theme management for TanStack Router and TanStack Start.</p>
</div>

<div align="center">

[![NPM Version](https://img.shields.io/npm/v/@lonik/themer)](https://www.npmjs.com/package/@lonik/themer)
[![License](https://img.shields.io/npm/l/@lonik/themer)](https://github.com/lukonik/themer)

</div>

## Docs

Full documentation is available at [lukonik.github.io/themer](https://lukonik.github.io/themer).

## Install

```bash
pnpm add @lonik/themer
```

## Quick Usage

Wrap your app with `ThemeProvider`:

```tsx
import { Outlet, createRootRoute } from "@tanstack/react-router";
import { ThemeProvider } from "@lonik/themer";

export const Route = createRootRoute({
  component: () => (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider>
          <Outlet />
        </ThemeProvider>
      </body>
    </html>
  ),
});
```

Use `useTheme` to read and update the current theme:

```tsx
import { useTheme } from "@lonik/themer";

export function ThemeToggle() {
  const { theme, setTheme } = useTheme();

  return (
    <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
      Current theme: {theme}
    </button>
  );
}
```

## Example

```tsx
<ThemeProvider
  themes={["light", "dark", "ocean"]}
  defaultTheme="system"
  storage="localStorage"
>
  <App />
</ThemeProvider>
```

For API details and guides, see the [documentation site](https://lukonik.github.io/themer).