open-index/open-npm huggingface dataset:
npm package: @react-fox/ofc-antd
Description: react 状态管理
Author: sschen86@163.com
Latest version: 0.2.0

# @react-fox/ofc-antd

基于 antd 使用 ofc 模式封装的 UI 组件库，在业务中更加高效方便的进行开发使用

## 特点

- ✔ 扩展自定义的组件配置
- ✔ 保留原生的 antd 组件配置
- ✔ 使用 ofc 模式进行开发
- ✔ 完美支持 typescript 类型检测

## 安装

```bash
npm install @react-fox/ofc-antd
```
npm package: @react-frontend-developer/jsdom-worker
Description: Experimental Web Worker API implementation for JSDOM.
Author: Jason Miller
Latest version: 0.1.1

<p align="center">
  <img src="https://i.imgur.com/Xqla6Ia.jpg" width="1100">
</p>


# jsdom-worker

> _Lets you use Web Workers in Jest!_

This is an experimental implementation of the Web Worker API (specifically Dedicated Worker) for JSDOM.

It does not currently do any real threading, rather it implements the `Worker` interface but all work is done in the current thread.  `jsdom-worker` runs wherever JSDOM runs, and does not require Node.

It supports both "inline" _(created via Blob)_ and standard _(loaded via URL)_ workers.

> **Hot Take:** this module likely works in the browser, where it could act as a simple inline worker "poorlyfill".

<a href="https://www.npmjs.org/package/jsdom-worker"><img src="https://img.shields.io/npm/v/jsdom-worker.svg?style=flat" alt="npm"></a> <a href="https://travis-ci.org/developit/jsdom-worker"><img src="https://travis-ci.org/developit/jsdom-worker.svg?branch=master" alt="travis"></a>


## Why?

Jest uses a JSDOM environment by default, which means it doesn't support Workers. This means it is impossible to test code that requires both NodeJS functionality _and_ Web Workers.  `jsdom-worker` implements enough of the Worker spec that it is now possible to do so.

## Installation

`npm i jsdom-worker`

## Example

```js
import 'jsdom-global/register'
import 'jsdom-worker'

let code = `onmessage = e => postMessage(e.data*2)`
let worker = new Worker(URL.createObjectURL(new Blob([code])))
worker.onmessage = console.log
worker.postMessage(5)  // 10
```

## Usage with Jest

For single tests, simply add `import 'jsdom-worker'` to your module.

Otherwise, add it via the [setupFiles](https://facebook.github.io/jest/docs/en/configuration.html#setupfiles-array) Jest config option:

```js
{
  "setupFiles": [
    "jsdom-worker"
  ]
}
```

## License

[MIT License](https://oss.ninja/mit/developit)
npm package: @react-frontend-developer/react-scripts
Description: Configuration and scripts for Create React App.
Latest version: 2.0.0-next.a671462c.8

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).<br>
Please refer to its documentation:

* [Getting Started](https://github.com/facebook/create-react-app/blob/master/README.md#getting-started) – How to create a new app.
* [User Guide](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App.
npm package: @react-fullstack/server-express
Description: create node express servers using react!
Author: shmuelhizmi
Latest version: 0.3.1-alpha.8

[![Express](./assets/Logo.png)](#)

<p align="center">
  A React library for creating express servers with react
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/@react-fullstack/server-express"><img alt="NPM Version" src="https://img.shields.io/npm/v/@react-fullstack/server-express?style=for-the-badge"></a>
  <a href="https://www.npmjs.com/package/@react-fullstack/server-express"><img alt="NPM Downloads" src="https://img.shields.io/npm/dt/@react-fullstack/server-express?style=for-the-badge"></a>
</p>

# react-express

create reactive node express servers using react!

## Example code

```tsx
import React from "react";
import express, { RequestHandler, Application } from "express";
import {
  Server,
  Route,
  Render,
  Router,
  ReactRoute,
} from "@react-express/server";
import * as path from "path";

const helloWorldJson: RequestHandler = (req, res) => {
  res.send({ hello: "world" });
};

const posts = ["hey", "bey", "hello", "world 🗺"];

const post: RequestHandler = (req, res) => {
  const newPost = req.body.post;
  if (newPost && typeof newPost === "string") {
    posts.push(newPost);
  }
  return res.send(JSON.stringify(posts));
};

const use = (app: Application) => {
  app.use(express.json(), express.urlencoded({ extended: true }));
};

Render(
  <Server reference={use} listen port={2345} then={() => console.log("finish")}>
    <ReactRoute>
      <h1>Hello world</h1>
    </ReactRoute>
    <Route path="/hello-world" get={helloWorldJson} />
    <Router path="/posts">
      <ReactRoute rootPath="/" assetsDir={path.join(__dirname, "./../assets/")}>
        {() => (
          <html>
            <head>
              <title>the first real fullstack react app</title>
            </head>
            <body>
              <div id="app">
                <ol>
                  {posts.map((post, index) => (
                    <li
                      style={{
                        color: `#${Math.floor(
                          Math.random() * 16777215
                        ).toString(16)}`,
                      }}
                      key={index}
                    >
                      <h1>{post}</h1>
                    </li>
                  ))}
                </ol>
              </div>
              <script src="./colors.js"></script>
            </body>
          </html>
        )}
      </ReactRoute>
      <Route path="/post" post={post} />
    </Router>
  </Server>
);
```
npm package: @react-gis/openlayers
Description: React components and hooks for OpenLayers
Author: nickdutto
Latest version: 1.1.4

[![GitHub Actions Workflow - Release Status](https://img.shields.io/github/actions/workflow/status/nickdutto/react-gis/release.yml?logo=github)](https://github.com/nickdutto/react-gis)
[![GitHub License](https://img.shields.io/github/license/nickdutto/react-gis)](https://github.com/nickdutto/react-gis/blob/main/LICENSE)
[![NPM Version](https://img.shields.io/npm/v/%40react-gis%2Fopenlayers)](https://www.npmjs.com/package/@react-gis/openlayers)
[![GitHub Repo stars](https://img.shields.io/github/stars/nickdutto/react-gis)](https://github.com/nickdutto/react-gis)

# ReactGIS - @react-gis/openlayers

React wrapper for OpenLayers.

[![Documentation](https://img.shields.io/badge/-Documentation-%23050505?style=for-the-badge&logo=readthedocs&logoColor=%2373e600)](https://reactgis.nickdutto.dev/docs)
[![Storybook](https://img.shields.io/badge/-Storybook-%23050505?style=for-the-badge&logo=storybook)](https://reactgis-storybook.nickdutto.dev)

## Getting Started

### Installation

Install via your preferred package manager

```bash tab="npm"
npm i @react-gis/openlayers
```

```bash tab="pnpm"
pnpm add @react-gis/openlayers
```

```bash tab="yarn"
yarn add @react-gis/openlayers
```

### Basic Usage

Basic map with OpenStreetMap:

```tsx title="app.tsx"
import { View } from "ol";
import { OSM } from "ol/source";

import { TileLayer } from "@react-gis/openlayers/layer";
import { Map } from "@react-gis/openlayers/map";

import "ol/ol.css";

function App() {
  return (
    <Map
      mapOptions={{ view: new View({ center: [0, 0], zoom: 4 }) }}
      style={{ width: "100%", height: "100%" }}
    >
      <TileLayer name="osm" source={new OSM()} />
    </Map>
  );
}
```
npm package: @react-gnome/core
Description: ## Getting Started
Author: Szymon Bretner
Latest version: 0.0.3

# react-gtk

## Getting Started

1. Make sure you have Node.js installed on your system, it's necessary for the development.

2. Install the required dependencies

```bash
yarn add @react-gnome/core
# or
npm install @react-gnome/core
```

3. Install the optional dependencies

- `gjs-esm-types` - adds type definitions for the GJS environment
- `ts-node` - allows you to start the project when written in TypeScript
- `@swc/core` - enabled swc compiler and speeds up development commands when using TypeScript

```bash
yarn add -D gjs-esm-types ts-node @swc/core
# or
npm install -D gjs-esm-types ts-node @swc/core
```

4. Initiate the project

Run the init command:

```bash
yarn react-gtk init
# or
npx react-gtk init
```
then open `react-gtk.config.mjs` file, change the app name and optionally adjust the project settings.

5. Start coding

The entry file will be located in `src/start.jsx`.

## Running in dev mode

```bash
yarn start
# or
npm run start
```

This command will start the project in development mode and watch for changes.


## Building the project

```bash
yarn build
# or
npm run build
```

This command will create a bundle file as well as other files meson needs to build the project. And then package it into a tarball file.

```bash
yarn bundle
# or
npm run bundle
```

This command will create a standalone bundle file.

## Documentation

Check out more of the React GTK features [here](./docs)
npm package: @react-gnome/gjs-esm-types
Description: TypeScript module declarations for GJS ESM modules.
Author: Clay Risser
Latest version: 0.0.5

#### This package provides module declarations for some of the most common GJS gir modules (see [Gnome JavaScript](https://gjs.guide/about/)). With it you will get fully typed imports for the following modules:

- `gi://Adw?version=1`
- `gi://Atk?version=1.0`
- `gi://GLib?version=2.0`
- `gi://GModule?version=2.0`
- `gi://GObject?version=2.0`
- `gi://Gdk?version=3.0`
- `gi://Gdk?version=4.0`
- `gi://GdkPixbuf?version=2.0`
- `gi://GdkWayland?version=4.0`
- `gi://GdkX11?version=3.0`
- `gi://GdkX11?version=4.0`
- `gi://Gio?version=2.0`
- `gi://Graphene?version=1.0`
- `gi://Gsk?version=4.0`
- `gi://Gtk?version=3.0`
- `gi://Gtk?version=4.0`
- `gi://HarfBuzz?version=0.0`
- `gi://Pango?version=1.0`
- `gi://PangoCairo?version=1.0`
- `gi://Soup?version=2.4`
- `gi://Soup?version=3.0`
- `gi://Vulkan?version=1.0`
- `gi://cairo?version=1.0`
- `gi://freetype2?version=2.0`
- `gi://xlib?version=2.0`

Additionally a module declaration for `system` module is included as well as some global functions and variables like `globalThis.print()`, `globalThis.imports`, `globalThis.pkg` etc.

# Use

1. Install this package via npm or yarn
2. Add this package to the tsconfig.json typeRoots:
   ```json tsconfig.json
   {
     "compilerOptions": {
       "typeRoots": ["node_modules/gjs-esm-types", "node_modules/@types"]
     }
   }
   ```
3. `gi` imports should now be correctly typed:

   ```ts
   import Gtk from "gi://Gtk?version=3.0";

   const window = new Gtk.Window();
   // Resolved Type - const window: Gtk.Window;
   ```

# Imports without version specifier

This package only provides module declarations for imports with a version specifier. If you want your imports to not include the version, add a `.d.ts` file in your project and define the module declarations in there, similarly to this:

### Example 1 - Gtk

```ts
declare module "gi://Gtk" {
  import Gtk from "gi://Gtk?version=4.0";
  export default Gtk;
}
```

### Example 2 - GLib

```ts
declare module "gi://GLib" {
  import GLib from "gi://GLib?version=2.0";
  export default GLib;
}
```

### Example 3 - Soup

```ts
declare module "gi://Soup" {
  import Soup from "gi://Soup?version=2.4";
  export default Soup;
}
```
npm package: @react-gnome/renderer
Description: A React renderer for the Gnome JS. It provides components and methods allowing to use React to build native Gnome GTK applications.
Author: Clay Risser
Latest version: 0.0.2

# React GJS Renderer

![NPM Version](https://img.shields.io/npm/v/%40reactgjs%2Frenderer)


A React renderer for the [Gnome JS](https://gjs.guide/about/). It provides components and methods allowing to use React to build native Gnome GTK applications.

This is the renderer used by the [React Gnome](https://github.com/react-gjs/react-gnome), which is the recommended way of bundling applications using this renderer.

_This is still a work in progress, bugs and missing features are expected._

## Elements of Gtk3

(All components have full TypeScript type definitions for each supported prop)

List of all GTK3 Widgets provided as JSX Components by this renderer:

- **ActionBar**
- **Box**
- **Button**
- **ButtonBox**
- **CheckButton**
- **ColorButton**
- **EventBox** (Pressable)
- **Expander**
- **FlowBox**
- **Frame**
- **Grid**
- **HeaderBar**
- **Icon**
- **Image**
- **Label**
- **LevelBar**
- **LinkButton**
- **MenuBar**
- **ModelButton**
- **NumberInput**
- **Paned**
- **Popover**
- **PopoverMenu**
- **ProgressBar**
- **RadioButton**
- **Revealer**
- **ScrollBox**
- **SearchBar**
- **SearchEntry** (SearchInput)
- **Selector**
- **Separator**
- **SizeGroupBox**
- **Slider**
- **Spinner**
- **Stack**
- **Switch**
- **TextArea**
- **TextEntry**
- **TextView**
- **VolumeButton**
- **Window**
- **Toolbar**
  - **ToolbarButton**
  - **ToolbarItem**
  - **ToolbarRadioButton**
  - **ToolbarSeparator**
  - **ToolbarToggleButton**
- **Markup**
  - **Big**
  - **Bold**
  - **Italic**
  - **Monospace**
  - **Small**
  - **Span**
  - **Strike**
  - **Sub**
  - **Sup**
  - **Underline**

## Usage

To use the renderer standalone, applications need to either define each import as a relative path to the correct file (e.x. `import { Renderer } from "../node_modules/react-gjs-renderer/dist/index.js"`) or bundle it into a single `.js` file (this is due to GJS not supporting importing packages from node_modules.) This usually is done using a tool like [webpack](https://webpack.js.org/), [esbuild](https://esbuild.github.io/), [rollup](https://rollupjs.org/guide/en/), etc.

Example esbuild setup:

```sh
esbuild ./App.tsx --bundle '--external:gi://*' --external:system  --format=esm --outfile=./out.js
```

```tsx
// App.tsx
import Gtk from "gi://Gtk?version=3.0";
import * as React from "react";
import { Box, Label, Renderer, Window } from "react-gjs-renderer";

Gtk.init(null);

const App = () => {
  return (
    <Window
      quitOnClose
      minWidth={200}
      minHeight={200}
    >
      <Box>
        <Label>Hello World</Label>
      </Box>
    </Window>
  );
};

const renderer = new Renderer({
  appId: "com.example.app",
});

renderer.start(<App />);
```

## Help needed

This renderer is still in early development and there are many components that need to be implemented. If you want to help, please
check [this discussion](https://github.com/ncpa0cpl/react-gjs-renderer/discussions/1).
npm package: @react-go/babel-plugin-auto-css-modules
Description: Automatically identify CSS Modules
Author: pengtikui
Latest version: 1.0.0

# @react-go/babel-plugin-auto-css-modules

Automatically identify CSS Modules

## Usage

Without options:

```json
{
  "plugins": ["@react-go/babel-plugin-auto-css-modules"]
}
```

With options:

```json
{
  "plugins": [
    ["@react-go/babel-plugin-auto-css-modules", { "flag": "css_modules" }]
  ]
}
```

## Options

### `flag`

`string`, default to `css_modules`

Query param added to style file path.

### `extensions`

`array`, default to `[".css"]`

Style files extensions which you need add query param.
npm package: @react-go/preset-antd
Description: React Go preset for Ant Design
Author: pengtikui
Latest version: 0.1.0

# @react-go/preset-antd

React Go preset for Ant Design

## Usage

### Install:

```
# npm
npm install @react-go/preset-antd
# yarn
yarn add @react-go/preset-antd
```

Config:

```javascript
// react-go.config.js
module.exports = {
  presets: [
    require('@react-go/preset-antd')(options),
  ],
};
```

Options:

* theme {object} [optional]

  Customize antd theme, example:

  ```javascript
  {
    '@primary-color': '#1DA57A',
  }
  ```
npm package: @react-go/scripts
Description: Scripts for React Go
Author: pengtikui
Latest version: 0.0.3

# @react-go/scripts

[![npm](https://img.shields.io/npm/v/@react-go/scripts?style=flat-square)](https://www.npmjs.com/package/@react-go/scripts)
[![issues](https://img.shields.io/github/issues/react-go/scripts?style=flat-square)](https://github.com/react-go/scripts/issues)
[![pulls](https://img.shields.io/github/issues-pr/react-go/scripts?style=flat-square)](https://github.com/react-go/scripts/pulls)
[![license](https://img.shields.io/github/license/react-go/scripts?style=flat-square)](https://github.com/react-go/scripts/blob/master/LICENSE)

`@react-go/scripts` is a set of configuration and scripts for build React application with zero configuration. It is builds on webpack, Babel, ESLint, webpack-chain etc, and inspired by Create React App, but can be extended and customized without eject.

## Getting Started

Create project directory and initialize:

```shell
$ mkdir react-app
$ cd react-app
$ npm init -y
```

Install `@react-go/scripts` and React:

```shell
# npm
$ npm install @react-go/scripts react react-dom
# yarn
$ yarn add @react-go/scripts react react-dom
```

Create necessary files:

```
react-app
    |-- src
         |-- index.js
    |-- public
         |-- index.html
    |-- package.json
```

you must have `src/index.js` and `public/index.html`.

Add scripts to `package.json`:

```json
{
  "scripts": {
    "start": "react-go start",
    "build": "react-go build"
  }
}
```

then you can run `npm start` to start development server or `npm run build` to builds the app for production.

Please refer to the [React Go docs](https://react-go.github.io/) for more information.

## License

MIT License (c) 2020-preset [pengtikui](https://github.com/pengtikui)
npm package: @react-google-maps/infobox
Description: InfoBox for React.js Google Maps API
Author: Alexey Lyakhov
Latest version: 3.0.0

# @react-google-maps/infobox

![logo](https://raw.githubusercontent.com/JustFly1984/react-google-maps-api/master/logo.png)

[![npm package](https://img.shields.io/npm/v/@react-google-maps/infobox)](https://www.npmjs.com/package/@react-google-maps/infobox)
[![npm downloads](https://img.shields.io/npm/dt/@react-google-maps/infobox)](https://www.npmjs.com/package/@react-google-maps/infobox)
[![npm bundle size](https://img.shields.io/bundlephobia/min/@react-google-maps/infobox)](https://www.npmjs.com/package/@react-google-maps/infobox)
[![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/react-google-maps)

@react-google-maps/infobox

> This library is dependency of main project @react-google-maps/api
npm package: @react-google-maps/marker-clusterer
Description: Marker Clusterer for React.js Google Maps API
Author: Alexey Lyakhov
Latest version: 3.0.0

# @react-google-maps/marker-clusterer

![logo](https://raw.githubusercontent.com/JustFly1984/react-google-maps-api/master/logo.png)

[![npm package](https://img.shields.io/npm/v/@react-google-maps/marker-clusterer)](https://www.npmjs.com/package/@react-google-maps/marker-clusterer)
[![npm downloads](https://img.shields.io/npm/dt/@react-google-maps/marker-clusterer)](https://www.npmjs.com/package/@react-google-maps/marker-clusterer)
[![npm bundle size](https://img.shields.io/bundlephobia/min/@react-google-maps/marker-clusterer)](https://www.npmjs.com/package/@react-google-maps/marker-clusterer)
[![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/react-google-maps)

@react-google-maps/marker-clusterer

> This library is dependency of main project @react-google-maps/api