open-index/open-npm huggingface dataset:
npm package: @react-kits/dom
Description: react dom basic kit
Author: lynnkoo
Latest version: 0.0.9

## react-dom-basic-kit

You can use custom components by hooks simplify.

### Container

this is a base component, you must set it on base dom like `Provider`

```javascript
export const App = () => {
  return (
    <Container>
      { ... }
    </Container>
  )
}
```

### Toast

You can use toast in container

```javascript
export const ToggleToastComponent = () => {
  const toggleToast = useToggleToast({ ... });
  const toggleMessage = () => {
    toggleToast('...')
  }
  return <div onClick={toggleMessage}>Toggle Toast Test</div>
}
```

More examples is in the stories

### Modal

You can use toast in container

```javascript
export const ToggleModalComponent = () => {
  const toggleModal = useToggleModal((mProps: any) => (
    <Modal {...mProps} blankClose>
      <div>Toggle Modal Test</div>
    </Modal>
  ))
  return <div onClick={toggleModal}>Toggle Dialog Modal</div>
}
```

### Theme

```javascript
import styles from './styles/Container.module.scss'
import styles_dark from './styles/Container-dark.module.scss'

function useStyles() {
  return useThemeStyles(styles, { dark: styles_dark })
}

const ThemeingText = () => {
  const cx = useStyles()
  return <div className={cx('test')}>Theme test Text</div>
}

const Comp = () => {
  const { theme, setTheme } = useAppContext()
  const toDark = () => {
    setTheme('dark')
  }
  const clearTheme = () => {
    setTheme('')
  }
  return (...)
}

```

### Form

```javascript
const TFormInput: React.FC<any> = (props: any) => {
  const { name, tips } = props
  const { update, checks, clearCheck, check } = useFormContext()
  const error = checks[name]
  return (
    <div>
      <input
        onChange={(x) => update({ [name]: x.target.value })}
        onFocus={() => clearCheck(name)}
        onBlur={() => check(name)}
      />
      {error > -1 && tips[error]}
    </div>
  )
}

const FormInput = enhanceFormInput(TFormInput)

const TForm: React.FC<any> = (props) => {
  const { children } = props
  const { data, submit } = useFormContext()
  return (
    <form>
      <div>In Form1: {JSON.stringify(data)}</div>
      {children}
      <div onClick={submit}>SUBMIT</div>
    </form>
  )
}

export const Form1 = enhanceFormComponent(TForm)

export const FormTest = (props: any) => {
  const onSubmit = (data: any) => {
    console.log('submit:', data)
  }
  return (
    <Form1 onSubmit={onSubmit}>
      <div>Test Form</div>
      <FormInput
        name="x1"
        test={[TEST_NOT_NULL, TEST_NOT_NUMBER]}
        tips={['not null', 'not number']}
      />
      <FormInput name="x2" test={[TEST_NOT_NUMBER]} tips={['not number']} />
    </Form1>
  )
}
```

More examples is in the stories

Thanks
npm package: @react-lab-mono/ui
Description: A self-contained, production-ready React component library built with TypeScript, CSS Modules, and a focus on accessibility and flexibility.
Latest version: 2.6.0

# @react-lab-mono/ui

A self-contained, production-ready React component library built with TypeScript, CSS Modules, and a focus on accessibility and flexibility.

## ✨ Features

- Built with **React + TypeScript**
- **Theme-ready** with CSS variables
- Styled using **CSS Modules**
- Accessible-first components
- Tested with **Jest** and **React Testing Library**
- Fully typed, tree-shakeable, and ready for consumption in any React project

## 📦 Installation

```bash
pnpm add @react-lab-mono/ui

# or whichever package managers you use
```

## 🚀 Usage

```bash
import { Button } from '@react-lab-mono/ui';

export function App() {
  return <Button>Click me</Button>;
}
```

This package is part of a larger monorepo called [react-lab-mono](https://github.com/giuseppe-messi/react-lab-mono).
npm package: @react-latest-ui/react-sticky-notes
Description: react sticky notes
Author: Manmohan Singh
Latest version: 0.2.6

# React Sticky Notes

A lightweight react component to handle stickies, notes and reminders without any single dependencies(like jQuery) except React.

# Demo

https://react-latest-ui.github.io/react-sticky-notes/

![Sticky Notes for React Application](screenshot.gif?raw=true)

## Installation

Install the React Sticky Notes [package](https://www.npmjs.com/package/@react-latest-ui/react-sticky-notes) package using [npm](https://www.npmjs.com/):

```bash
npm install @react-latest-ui/react-sticky-notes --save
```

## Setting Up

```bash
git clone https://github.com/react-latest-ui/react-sticky-notes.git
npm install
npm start run
```

## Features

* Pure React Sticky Notes
* Draggable & Resizable Stickies
* Inline Content Editable
* Configurable Sticky Colors

## Usage

```javascript
import React, { Component } from 'react';
import ReactStickyNotes from '@react-latest-ui/react-sticky-notes';

class MyApp extends Component {
	constructor(props) {
		super(props);
	}  
	render() {
		return (
			<ReactStickyNotes />
		)
	}
});
```

### React Stickies Props

```javascript
sessionKey: ?String,
colors: ?Array = [HexCodes],
notes: ?Array = [{
	color: ?HexCode,
	text: ?String
}],
containerWidth: ?String{px|%},
containerHeight: ?String{px|%},
noteWidth: ?Number,
noteHeight: ?Number,
footer: ?Boolean = {true|false},
onBeforeChange: (type:String, payload:Object, notes: Array) => {
	return payload;
}
onChange: (type:String, payload:Object, notes: Array) => {

}

```

## Contribute

If you have a feature request, please add it as an issue or make a pull request.

## TODO List

- [x] Basic Notes with CRUD
- [x] Resizable
- [x] Draggable
- [x] Responsive to all devices/desktop
- [x] Import notes from [JSON](data/sample-data.json)/[CSV](data/sample-data.csv)
- [ ] ----
npm package: @react-leaf/core
Description: React Leaf Core components
Author: Nans Laupretre
Latest version: 0.0.2

## Description

`@react-leaf/core` is a library of lightweight and easy-to-use React components written in TypeScript.\
It is designed to help developers quickly build UIs without having to worry about the underlying implementation details.

[View Documentation](/#)

## Installation

```bash
# with npm
npm install @react-leaf/core

# with yarn
yarn add @react-leaf/core
```

## Usage

In your `main.js` or `app.js` import the styles:

```js
import '@react-leaf/core/styles.css'
```

And import any composant to use it:

```jsx
import { Button } from '@react-leaf/core'

function Demo() {
  return <Button>This is a button !</Button>
}
```

And your good to go !
npm package: @react-lib-tech/react-jsx-to-tsx
Description: A tiny React component library (JS) for converting TSX → JSX and extracting text
Author: Abhishek Kumar Singh
Latest version: 1.0.4

# @react-lib-tech/react-jsx-to-tsx

A Node.js utility to **convert React JavaScript files** (`.jsx`, `.js`) into **TypeScript/TSX files** (`.tsx`, `.ts`) and optionally **extract all text content** for i18n, localization, and accessibility workflows.  

This makes it useful for:

- 🔄 **JavaScript → TypeScript migration** → generate `.tsx`/`.ts` builds  

---

## ✨ Features

- Recursively walks through a project folder
- Converts:
  - `.jsx` → `.tsx`
  - `.js` → `.ts`
- Automatically **rewrites import aliases** (e.g., `@/components` → relative paths)
---

## 📦 Installation

```bash
npm install @react-lib-tech/react-jsx-to-tsx
```

---

## 🚀 Usage

### 1) Convert `.tsx` / `.ts` → `.jsx` / `.js`

```ts
import convertFolder from "@react-lib-tech/react-jsx-to-tsx";

(async () => {
  await convertFolder("src", "dist");
})();
```

✅ This will recursively:
- Convert `src/App.tsx` → `dist/App.jsx`
- Convert `src/utils/helpers.ts` → `dist/utils/helpers.js`
- Rewrite imports (`@/components/...` → relative paths)

---

## 📖 Use Cases

- ✅ Migrate a React JavaScript codebase to plain JavaScript
- ✅ Audit accessibility attributes
- ✅ Build custom search indexes from UI strings

---

## 📜 License

MIT © [Abhishek Kumar Singh](https://www.npmjs.com/~abhishek2122)
npm package: @react-lib-tech/react-radiux-dynamic-table
Description: A dynamic Radix UI table with actions, checkboxes, and single/multiple row selection.
Author: Abhishek Kumar Singh
Latest version: 1.0.3

# React Radiux Dynamic Table

A dynamic and customizable **Radiux UI table** for React.  
This library is designed to simplify the creation of feature-rich tables in React applications by providing ready-to-use functionality such as **sorting, search, pagination, row selection, and actions** while still giving developers full flexibility to customize styles and cell renderers.

---

## 🎯 Purpose
Building complex tables with Radiux UI often requires rewriting the same logic (sorting, search, pagination, row selection, etc.).  
This library solves that problem by offering a **reusable, dynamic table component** that you can drop into any React project, customize via props, and save development time.

---

## 📦 Installation

```bash
npm install @react-lib-tech/react-radiux-dynamic-table
```

or with yarn:

```bash
yarn add @react-lib-tech/react-radiux-dynamic-table
```

---

## 🚀 Usage Example

```tsx
import React from "react";
import DynamicTable from "@react-lib-tech/react-radiux-dynamic-table";
import { Chip } from "@mui/material";
import EmailIcon from "@mui/icons-material/Email";
import BadgeIcon from "@mui/icons-material/Badge";
import PersonIcon from "@mui/icons-material/Person";
import DownloadIcon from "@mui/icons-material/Download";

function App() {
  const columns = [
    { key: "id", label: "ID", icon: <BadgeIcon fontSize="small" /> },
    { key: "name", label: "Name", icon: <PersonIcon fontSize="small" /> },
    { key: "email", label: "Email", icon: <EmailIcon fontSize="small" /> },
    {
      key: "status",
      label: "Status",
      render: (row) => (
        <Chip
          label={row.status}
          color={row.status === "Active" ? "success" : "default"}
          size="small"
        />
      ),
    },
  ];

  const rows = [
    { id: 1, name: "Abhishek Singh", email: "abhishek@example.com", status: "Active" },
    { id: 2, name: "Ravi Kumar", email: "ravi@example.com", status: "Inactive" },
    { id: 3, name: "Pooja Sharma", email: "pooja@example.com", status: "Active" },
  ];

  const actions = [
    { type: "view" },
    { type: "edit" },
    { type: "delete" },
    {
      label: "Download",
      icon: <DownloadIcon fontSize="small" color="primary" />,
      onClick: (row) => console.log("Download row:", row),
    },
  ];

  return (
    <DynamicTable
      columns={columns}
      data={rows}
      actions={actions}
      multiSelect={true}
      onRowAction={(action, row) => console.log("Action:", action, row)}
      onSelectionChange={(selected) => console.log("Selected rows:", selected)}
      onRowClick={(row) => console.log("Row clicked:", row)}
    />
  );
}

export default App;
```

---

## 📝 License
MIT © [Abhishek Kumar Singh](https://github.com/Abhishek2122)
npm package: @react-lib-tech/react-tsx-to-jsx
Description: A tiny React component library (JS) for converting TSX → JSX and extracting text
Author: Abhishek Kumar Singh
Latest version: 1.0.11

# @react-lib-tech/react-tsx-to-jsx

A Node.js utility to **convert React TypeScript files** (`.tsx`, `.ts`) into **JavaScript/JSX files** (`.jsx`, `.js`) and optionally **extract all text content** for i18n, localization, and accessibility workflows.  

This makes it useful for:

- 🔄 **TypeScript → JavaScript migration** → generate `.jsx`/`.js` builds  
- 🔤 **i18n/Localization** → collect all user-facing text for translations  
- 🛠 **Accessibility audits** → extract `placeholder`, `title`, `aria-label`, etc.  
- 🔍 **Search indexing** → gather visible strings for indexing  

---

## ✨ Features

- Recursively walks through a project folder
- Converts:
  - `.tsx` → `.jsx`
  - `.ts` → `.js`
- Automatically **rewrites import aliases** (e.g., `@/components` → relative paths)
- Extracts:
  - **Visible text nodes** (`<p>Hello</p> → "Hello"`)
  - **Attributes** (`placeholder`, `title`, `alt`, `aria-label`)
- Falls back to **AST parsing** for text if components cannot be imported
- Returns structured JSON `{ file, textContent, placeholders, titles, labels }`

---

## 📦 Installation

```bash
npm install @react-lib-tech/react-tsx-to-jsx
```

---

## 🚀 Usage

### 1) Convert `.tsx` / `.ts` → `.jsx` / `.js`

```ts
import convertFolder from "@react-lib-tech/react-tsx-to-jsx";

(async () => {
  await convertFolder(srcFolder = "src", outFolder = "dist",InputreplacementRules = [  
      { find: /@\/components\//g, replace: "../components/" },
      { find: /@\/lib\//g, replace: "../../lib/" },
      { find: /@\/utils\//g, replace: "../utils/" },
      { find: /@\/utils\//g, replace: "../utils/" },
      {find:/@\/assets\//g, replace :"../public/assets/"},
      {find:".tsx", replace :".jsx"}
],typeConvert=".jsx");
})();
```

✅ This will recursively:
- Convert `src/App.tsx` → `dist/App.jsx`
- Convert `src/utils/helpers.ts` → `dist/utils/helpers.js`
- Rewrite imports (`@/components/...` → relative paths)

---

## 📖 Use Cases

- ✅ Migrate a React TypeScript codebase to plain JavaScript
- ✅ Audit accessibility attributes
- ✅ Build custom search indexes from UI strings

---

## 📜 License

MIT © [Abhishek Kumar Singh](https://www.npmjs.com/~abhishek2122)
npm package: @react-lib-tech/universal-test-cases-gen
Description: Universal library to auto-generate test cases for Node, React, Angular, Vue, and NestJS using Jest, Mocha, or Vitest.
Author: @react-lib-tech
Latest version: 0.1.9

# @react-lib-tech/universal-test-cases-gen

[![npm version](https://img.shields.io/npm/v/@react-lib-tech/universal-test-cases-gen.svg)](https://www.npmjs.com/package/@react-lib-tech/universal-test-cases-gen)
[![npm downloads](https://img.shields.io/npm/dm/@react-lib-tech/universal-test-cases-gen.svg)](https://www.npmjs.com/package/@react-lib-tech/universal-test-cases-gen)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)

🚀 A universal **test case generator** for **Node.js, React, Angular, Vue, and NestJS**.  
Supports **Jest, Mocha, and Vitest**.  
Works as both a **CLI tool** and a **library**.

👉 [View on npm](https://www.npmjs.com/package/@react-lib-tech/universal-test-cases-gen)

---

## ✨ Features
- 🔎 Scans your project folder automatically  
- 🧪 Generates test stubs for:
  - Node.js functions/classes
  - React components
  - Angular/Vue/NestJS (basic scaffolds)
- 📦 Test framework support:
  - Jest
  - Mocha + Chai
  - Vitest
- 📂 Writes `.test.ts` files into `__tests__/` (or custom folder)  
- 📊 Optional JSON report output  

---

## 📦 Installation

### Global (CLI tool)
```sh
npm install -g @react-lib-tech/universal-test-cases-gen
```

### Local (as dev dependency)
```sh
npm install --save-dev @react-lib-tech/universal-test-cases-gen
```

---

## 🚀 Usage (CLI)

```sh
universal-test-cases-gen --root ./src --framework react --testFramework jest --output __tests__ --reportJson
```

Options:
- `--root` → project root folder to scan (default: `./src`)
- `--framework` → `node | react | angular | vue | nestjs`
- `--testFramework` → `jest | mocha | vitest`
- `--output` → output folder for test files (default: `__tests__`)
- `--reportJson` → if provided, outputs a JSON report

---

## 📖 Usage (Library)

```ts
import { generateTests, TestGenConfig } from "@react-lib-tech/universal-test-cases-gen";

const config: TestGenConfig = {
  rootFolder: "./src",
  framework: "react",
  testFramework: "jest",
  output: "__tests__",
  reportJson: true
};

(async () => {
  const report = await generateTests(config);
  console.log("📑 Test Report:", report);
})();
```

---

## 📂 Example Output

```json
[
  {
    "file": "src/components/Button.tsx",
    "exports": ["Button"]
  },
  {
    "file": "src/utils/math.ts",
    "exports": ["add", "subtract"]
  }
]
```

---

## 📜 License

MIT © 2025 – @react-lib-tech/universal-test-cases-gen
npm package: @react-liblary/use-global-state
Description: ## What is this
Latest version: 1.0.4
Deprecated: move to https://www.npmjs.com/package/@react-libraries/use-global-state

# @react-liblary/use-global-state

## What is this

Global `setState` that does not require `provider` or `store`

## usage

- `[data,dispatch] = useGlobalState(key,initData)`

```tsx
import { useGlobalState } from '@react-liblary/use-global-state';
import React from 'react';

export const Tall = () => {
  console.log('Tall');
  // useGlobalState(key, value);
  // useGlobalState(['KeyGroup1','KeyGroup2'...], value); //Composite key
  const [value, setValue] = useGlobalState('tall', '170');
  return (
    <div>
      Tall:
      <input
        value={value}
        onChange={(e) => {
          setValue(e.target.value);
        }}
      />
    </div>
  );
};
export const Weight = () => {
  console.log('Weight');
  const [value, setValue] = useGlobalState('weight', '60');
  return (
    <div style={{ display: 'flex' }}>
      Weight:
      <input
        value={value}
        onChange={(e) => {
          setValue(e.target.value);
        }}
      />
    </div>
  );
};

export const Bmi = () => {
  console.log('Bmi');
  const [tall] = useGlobalState<string>('tall');
  const [weight] = useGlobalState<string>('weight');
  return (
    <div>
      {isNaN(Number(tall)) || isNaN(Number(weight))
        ? 'Error'
        : `BMI:${Math.floor((Number(weight) / Math.pow(Number(tall) / 100, 2)) * 100) / 100}`}
    </div>
  );
};

const Page = () => (
  <>
    <Bmi />
    <Tall />
    <Weight />
  </>
);
export default Page;
```

- `mutate(key,data)`

```tsx
import { mutate } from '@react-liblary/use-global-state';

interface Props {
  name: string;
}

export const InputBox = ({ name }: Props) => {
  return (
    <div>
      <input
        defaultValue="100"
        onKeyPress={(e) => {
          e.key === 'Enter' && mutate(name, Number(e.currentTarget.value));
        }}
      />
    </div>
  );
};
```

- `reset`

```tsx
import { reset } from '@react-liblary/use-global-state';

reset(); //Clear cache
```

- `getCache` and `setCache`

```tsx
import { getCache,setCache } from '@react-liblary/use-global-state';
const cache = getCache([...KeyGroups]); //Pass this data to props

//For SSR
setCache(cache);
```
npm package: @react-libraries/next-apollo-server
Description: Package for calling ApolloServer4 from Next.js.
Author: SoraKumo
Latest version: 1.0.0

# @react-libraries/next-apollo-server

Package for calling ApolloServer4 from Next.js.

'scalar Upload' is available for multipart data.
The following headers need to be added to the client-side request in order for the upload to take place.

```ts
{'apollo-require-preflight': 'true'}
```

## Sample

- Source
  <https://github.com/ReactLibraries/next-apollo-server>
- App
  - <https://github.com/SoraKumo001/next-urql>
  - <https://github.com/SoraKumo001/next-apollo-server>

### src/pages/api/graphql.ts

```ts
import { promises as fs } from "fs";
import { ApolloServer } from "@apollo/server";
import {
  executeHTTPGraphQLRequest,
  FormidableFile,
} from "@react-libraries/next-apollo-server";
import type { IResolvers } from "@graphql-tools/utils";
import type { NextApiHandler, NextApiRequest, NextApiResponse } from "next";

/**
 * Type settings for GraphQL
 */
const typeDefs = `
  # Return date
  scalar Date
  type Query {
    date: Date!
  }

  # Return file information
  type File {
    name: String!
    type: String!
    value: String!
  }
  scalar Upload
  type Mutation {
    upload(file: Upload!): File!
  }
`;

/**
 * Set Context type
 */
type Context = { req: NextApiRequest; res: NextApiResponse };

/**
 * Resolver for GraphQL
 */
const resolvers: IResolvers<Context> = {
  Query: {
    date: async (_context, _args) => new Date(),
  },
  Mutation: {
    upload: async (_context, { file }: { file: FormidableFile }) => {
      return {
        name: file.originalFilename,
        type: file.mimetype,
        value: await fs.readFile(file.filepath, { encoding: "utf8" }),
      };
    },
  },
};

/**
 * apolloServer
 */
const apolloServer = new ApolloServer<Context>({
  typeDefs,
  resolvers,
});
apolloServer.start();

/**
 * APIRoute handler for Next.js
 */
const handler: NextApiHandler = async (req, res) => {
  //Convert NextApiRequest to body format for GraphQL (multipart/form-data support).
  return executeHTTPGraphQLRequest({
    req,
    res,
    apolloServer,
    context: async () => ({ req, res }),
    options: {
      //Maximum upload file size set at 10 MB
      maxFileSize: 10 * 1024 * 1024,
    },
  });
};

export default handler;

export const config = {
  api: {
    bodyParser: false,
  },
};
```
npm package: @react-libraries/next-exchange-ssr
Description: SSR with urql and Next.js for `Exchange`
Author: SoraKumo
Latest version: 1.0.10

# @react-libraries/next-exchange-ssr

[![](https://img.shields.io/npm/l/@react-libraries/next-exchange-ssr)](https://www.npmjs.com/package/@react-libraries/next-exchange-ssr)
[![](https://img.shields.io/npm/v/@react-libraries/next-exchange-ssr)](https://www.npmjs.com/package/@react-libraries/next-exchange-ssr)
[![](https://img.shields.io/npm/dw/@react-libraries/next-exchange-ssr)](https://www.npmjs.com/package/@react-libraries/next-exchange-ssr)
[![](https://deepwiki.com/badge.svg)](https://deepwiki.com/ReactLibraries/next-exchange-ssr)

SSR with urql in Next.js and React Router (Remix).
Does not require 'withUrqlClient'.

## Sample

- Source
  <https://github.com/ReactLibraries/next-exchange-ssr>
- App
  <https://github.com/SoraKumo001/next-urql>

### src/pages/\_app.tsx

```ts
import { useMemo, useState } from "react";
import { cacheExchange, Client, fetchExchange, Provider } from "urql";
import {
  useCreateNextSSRExchange,
  NextSSRProvider,
  NextSSRWait,
} from "@react-libraries/next-exchange-ssr";
import type { AppType } from "next/app";

const isServerSide = typeof window === "undefined";
const endpoint = "/api/graphql";
const url = isServerSide
  ? `${
      process.env.VERCEL_URL
        ? `https://${process.env.VERCEL_URL}`
        : "http://localhost:3000"
    }${endpoint}`
  : endpoint;

const App: AppType = ({ Component, pageProps }) => {
  // NextSSRExchange to be unique on AppTree
  const nextSSRExchange = useCreateNextSSRExchange();
  const client = useMemo(() => {
    return new Client({
      url,
      // Only on the Server side do 'throw promise'.
      suspense: isServerSide,
      exchanges: [cacheExchange, nextSSRExchange, fetchExchange],
    });
  }, [nextSSRExchange]);

  return (
    <Provider value={client}>
      {/* Additional data collection functions for SSR */}
      <NextSSRProvider>
        <Component {...pageProps} />
        <NextSSRWait>
          {/* Describe components to be called after the end of asynchronous processing. */}
        </NextSSRWait>
      </NextSSRProvider>
    </Provider>
  );
};

// Create getInitialProps that do nothing to prevent Next.js optimisation.
App.getInitialProps = () => ({});

export default App;
```

### src/pages/index.tsx

```tsx
import { gql, useQuery } from "urql";

// Date retrieval
const QUERY = gql`
  query date {
    date
  }
`;

const Page = () => {
  const [{ data }, refetch] = useQuery({ query: QUERY });

  return (
    <>
      <a
        target="_blank"
        href="https://github.com/SoraKumo001/next-urql"
        rel="noreferrer"
      >
        Source code
      </a>
      <hr />
      {/* SSRedacted data can be updated by refetch. */}
      <button onClick={() => refetch({ requestPolicy: "network-only" })}>
        Update date
      </button>{" "}
      {/* Dates are output as SSR. */}
      {data?.date &&
        new Date(data.date).toLocaleString("en-US", { timeZone: "UTC" })}
    </>
  );
};

export default Page;
```
npm package: @react-libraries/use-fetch
Description: ## 1. Description
Author: SoraKumo
Latest version: 1.0.1

# @react-libraries/useFetch

## 1. Description

Like useSWR, it caches the retrieved data.
It is also possible to pass cache data from SSR.

## 2. usage

### 2.1. Basic

```ts
type fetchOption<T> = {
  fetch?: fetcherFn<T>; // Default: (key) => fetch(key).then((data) => data.json());
  initialData?: T;      // first data
  skip?: boolean;       // If 'true', execution will be skipped
};

useFetch<T>(key: string, options?: fetchOption<T>): {
    data?: T;
    dispatch: (data?: T) => void; //update cache
    isValidating: boolean;        //fetch in progress
    error: unknown;               //catch error
}

mutate<T>(key: string, value?: T | undefined) => void;
query<T>(key: string) => T;

//SSR
getDataFromTree(element: ReactElement) => Promise<CachesType>;
createCache(data: CachesType<unknown> | undefined) => void;
```

### 2.2. SSR

SSR can be done automatically by passing cache data as follows in Next.js.  
Use'getDataFromTree' and 'createCache'.

**_app.tsx**

```tsx
import { AppContext, AppProps } from 'next/app';
import { createCache, getDataFromTree, CacheType } from '@react-libraries/use-fetch';

const IS_SERVER = !process.browser;

const App = (props: AppProps & { cache: CacheType }) => {
  const { Component, cache } = props;
  !IS_SERVER && createCache(cache);
  return <Component />;
};
App.getInitialProps = async ({ Component, router, AppTree }: AppContext) => {
  const cache = IS_SERVER
    ? await getDataFromTree(<AppTree Component={Component} pageProps={{}} router={router} />)
    : {};
  return { cache };
};
export default App;
```

## 3. example

```tsx
import { useFetch } from '@react-libraries/use-fetch';

export const Page = () => {
  const router = useRouter();
  const { data, error, isValidating, dispatch } = useFetch<DataType>(
    "URL"
  );
  return (
    <>
      <button onClick={dispatch()}>Reload</button>
      {isValidating && <div>Loading</div>}
      {error && <div>Error</div>}
      {data && <pre>{JSON.stringify(data,undefined,'  ')}</pre>}
    </>
  );
};
```
npm package: @react-libraries/use-global-state
Description: ## What is this
Latest version: 1.0.17

# @react-libraries/use-global-state

## What is this

Global `setState` that does not require `provider` or `store`

## usage

- `[data,dispatch] = useGlobalState(key,initData)`

```tsx
import { useGlobalState } from '@react-libraries/use-global-state';
import React from 'react';

export const Tall = () => {
  console.log('Tall');
  // useGlobalState(key, value);
  // useGlobalState(['KeyGroup1','KeyGroup2'...], value); //Composite key
  const [value, setValue] = useGlobalState('tall', '170');
  return (
    <div>
      Tall:
      <input
        value={value}
        onChange={(e) => {
          setValue(e.target.value);
        }}
      />
    </div>
  );
};
export const Weight = () => {
  console.log('Weight');
  const [value, setValue] = useGlobalState('weight', '60');
  return (
    <div style={{ display: 'flex' }}>
      Weight:
      <input
        value={value}
        onChange={(e) => {
          setValue(e.target.value);
        }}
      />
    </div>
  );
};

export const Bmi = () => {
  console.log('Bmi');
  const [tall] = useGlobalState<string>('tall');
  const [weight] = useGlobalState<string>('weight');
  return (
    <div>
      {isNaN(Number(tall)) || isNaN(Number(weight))
        ? 'Error'
        : `BMI:${Math.floor((Number(weight) / Math.pow(Number(tall) / 100, 2)) * 100) / 100}`}
    </div>
  );
};

const Page = () => (
  <>
    <Bmi />
    <Tall />
    <Weight />
  </>
);
export default Page;
```

- `mutate(key,data)`

```tsx
import { mutate } from '@react-libraries/use-global-state';

interface Props {
  name: string;
}

export const InputBox = ({ name }: Props) => {
  return (
    <div>
      <input
        defaultValue="100"
        onKeyPress={(e) => {
          e.key === 'Enter' && mutate(name, Number(e.currentTarget.value));
        }}
      />
    </div>
  );
};
```

- `reset`

```tsx
import { reset } from '@react-libraries/use-global-state';

reset(); //Clear cache
```

- `getCache` and `setCache`

```tsx
import { getCache,setCache } from '@react-libraries/use-global-state';
const cache = getCache([...KeyGroups]); //Pass this data to props

//For SSR
setCache(cache);
```

- Provider - `GlobalState`をProvider範囲内に限定します

```tsx
import { Provider } from '../hooks/useContexts'

const Page = () => {
  return (
    <Provider>
      <Test />
    </Provider>
  )
}

export default Page
```
npm package: @react-libraries/use-local-event
Description: Handling events between components in React
Author: SoraKumo
Latest version: 1.0.2

# @react-libraries/use-local-event

## What is this

Handling events between components in React

***

## Table of contents

### Interfaces link

- [LocalEvent](#localevent)

### Functions link

- [useLocalEventCreate](#uselocaleventcreate)
- [useLocalEvent](#useLocalEvent)
- [dispatchLocalEvent](#dispatchLocalEvent)

### Samples link

- [Sample](#sample)

***

## Interface

### LocalEvent

Type for event control

```ts
export interface LocalEvent<T> {
  callbacks: ((action: T) => void)[];
}
```

## Functions

### useLocalEventCreate

```ts
useLocalEventCreate<T>()
```

- `<T>` Event action type

Create a event

___

### useLocalEvent

```ts
useLocalEvent<T>(event: LocalEvent<T>, callback: (action:T)=>void)
```

- `<T>` Event action type
- `event` Event Instance
- `callback` Event processing details

Interpreting events
___

### dispatchLocalEvent

```ts
dispatchLocalEvent<T>(event: LocalEvent<T>, action: T)
```

- `<T>` Event action type
- `event` Event Instance
- `action` Operation

Trigger an event

___

## Sample
![image](https://user-images.githubusercontent.com/54426986/122672957-38896880-d209-11eb-8acd-5985f3965950.gif)

```tsx
import React, { useState } from 'react';
import {
  LocalEvent,
  dispatchLocalEvent,
  useLocalEventCreate,
  useLocalEvent,
} from '@react-libraries/use-local-event';

type Action =
  | { readonly type: 'add_a'; payload: number }
  | { readonly type: 'add_b'; payload: number };

// Event Sending Component
const Sender = ({ event }: { event: LocalEvent<Action> }) => {
  return (
    <div>
      <button onClick={() => dispatchLocalEvent(event, { type: 'add_a', payload: 100 })}>A</button>
      <button onClick={() => dispatchLocalEvent(event, { type: 'add_b', payload: 100 })}>B</button>
    </div>
  );
};

// Event Reception Component
const Recv = ({ event }: { event: LocalEvent<Action> }) => {
  const [group, setGroup] = useState('a');
  const [value, setValue] = useState(0);
  useLocalEvent(event, ({ type, payload }) => {
    type === 'add_a' && group === 'a' && setValue((v) => v + payload);
    type === 'add_b' && group === 'b' && setValue((v) => v + payload);
  });
  return (
    <div>
      <form>
        <label>
          <input type="radio" name="group" checked={group === 'a'} onChange={() => setGroup('a')} />
          A
        </label>
        <label>
          <input type="radio" name="group" checked={group === 'b'} onChange={() => setGroup('b')} />
          B
        </label>
        <div>{value}</div>
      </form>
    </div>
  );
};

// Parent component
const App = () => {
  const event = useLocalEventCreate<Action>();
  return (
    <>
      <Recv event={event} />
      <hr />
      <Recv event={event} />
      <hr />
      <Sender event={event} />
    </>
  );
};

export default App;
```
npm package: @react-libraries/use-ssr
Description: Next.js hook for using external data with SSR The difference with 'getStaticProps' is that the same code can be used for both the server and the client when receiving external data.
Author: SoraKumo
Latest version: 1.0.18
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm package: @react-library/permissions
Description: Permissions helper
Author: serusko
Latest version: 0.0.5

# @react-library/permissions

> Ready made Permissions helpers fore React

[![NPM](https://img.shields.io/npm/v/@react-library/permissions.svg)](https://www.npmjs.com/package/@react-library/permissions) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
yarn add @react-library/permissions
or
npm install --save @react-library/permissions
```

## Usage

### Setup app context

```jsx
import { useSelect } 'react-redux';
import Provider from '@react-library/permissions';

// example resolver using redux (feel free to put your own)
const resolver = (query: string): boolean => {
  // read array of permissions from user profile
  const permissions = useSelect(store => store.user.permissions);
  // check if list of permissions contains requested permission
  return permissions.includes(query);
}

const App = () => (
  <Provider resolver={resolver}>
  {/* now you have available permissions resolver in app */}
  {...appContent}
  </Provider>
);
```

### Value Hook

- every time resolver is changed, specific permission will be re-calculated

```tsx
import { useSelect } from '@react-library/permissions';
const canWrite = usePermission('write');
```

### Getter Hook

- every time resolver is changed, specific permission will be re-calculated with new resolver

```tsx
import { useGetPermission } from '@react-library/permissions';
const getPermission = useGetPermission();
const allowedActions = ['read', 'write'].filter(action => getPermission(action));
```

### Global reference

- if you need to access to permissions outside of JSX (fetch, saga, reducer, ...)

```tsx
import { getPermission } from '@react-library/permissions';

const callApi = () => {
  if (!getPermission('read')) {
  }
};
```

## License

MIT © [serusko](https://github.com/serusko)
npm package: @react-lifecycle-emulator/core
Description: Allows behavior-driven tests against React components
Latest version: 0.0.3
Deprecated: No longer supported.

# React-Lifecycle-Emulator Core

A package to emulate React's lifecycle for components while making it easy to
unit test. For more information, see the full [react-lifecycle-emulator
project](/readme.md).

## Core usage

TypeScript:

    import {reactEmulator} from 'react-lifecycle-emulator';

    // without TSX
    const emulator = reactEmulator<MyComponent>(MyComponent);
    const target = emulator.construct(initialProps, context);

    // with TSX
    const target = emulate<MyComponent>(<MyComponent />);

    // control lifecycle
    target.controls.mount();
    target.controls.updateProps(newProps);
    target.controls.updateProps(newProps, newContext);

    // access functions on component instance
    target.component.handleClick();

    // access the rendered JSX elements
    const rendered: JSX.Element | null = target.getRendered();

JavaScript:

    import {emulate} from 'react-lifecycle-emulator';

    const target = emulate(<MyComponent {...initialProps} />, context);

    // control lifecycle
    target.controls.mount();
    target.controls.updateProps(newProps);
    target.controls.updateProps(newProps, newContext);

    // access functions on component instance
    target.component.handleClick();

    // access the rendered JSX elements
    const rendered = target.getRendered();

Note that the core framework never mounts children, this way you can test the
behavior of your component in isolation.
npm package: @react-lit/alert
Description: An alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.
Author: Joel Voss
Latest version: 0.7.1

# @react-lit/alert

An alert is an element that displays a brief, important message in a way that
attracts the user's attention without interrupting the user's task.

Dynamically rendered alerts are automatically announced by most screen readers,
and in some operating systems, they may trigger an alert sound. It is important
to note that, at this time, screen readers do not inform users of alerts that
are present on the page before page load completes.

## Installation

```bash
$ npm i @react-lit/alert
# or
$ yarn add @react-lit/alert
```

## Example

```js
import * as React from 'react';
import { Alert } from "@react-lit/alert";

function Example() {
  const [messages, setMessages] = React.useState([]);
  return (
    <div>
      <button
        onClick={() => {
          setMessages((prevMessages) =>
            prevMessages.concat([`Message #${prevMessages.length + 1}`])
          );
          setTimeout(() => {
            setMessages((prevMessages) => prevMessages.slice(1));
          }, 5000);
        }}
      >
        Add a message
      </button>
      <div>
        {messages.map((message, index) => (
          <Alert key={index}>{message}</Alert>
        ))}
      </div>
    </div>
  );
}
```

## Development

(1) Install dependencies

```bash
$ npm i
# or
$ yarn
```

(2) Run initial validation

```bash
$ ./Taskfile.sh validate
```

(3) Run tests in watch-mode to validate functionality.

```bash
$ ./Taskfile test -w
```

---

_This project was set up by @jvdx/core_
npm package: @react-lit/alert-dialog
Description: An alert dialog is a modal dialog that interrupts the user's workflow to communicate an important message and acquire a response. Examples include action confirmation prompts and error message confirmations.
Author: Joel Voss
Latest version: 0.8.0

# @react-lit/alert-dialog

An alert dialog is a modal dialog that interrupts the user's workflow to
communicate an important message and acquire a response.
Examples include action confirmation prompts and error message confirmations.

When a Dialog opens, the least destructive action should be focused so that
if a user accidentally hits enter when the dialog opens no damage is done.
This is accomplished with the `leastDestructiveRef` prop.

## Installation

```bash
$ npm i @react-lit/alert-dialog
# or
$ yarn add @react-lit/alert-dialog
```

## Example

```js
import * as React from 'react';
import { AlertDialog, AlertDialogLabel, AlertDialogDescription } from '@react-lit/alert-dialog';

function Example() {
  const [showDialog, setShowDialog] = React.useState(false);
  const cancelRef = React.useRef();
  const open = () => setShowDialog(true);
  const close = () => setShowDialog(false);

  return (
    <div>
      <button onClick={open}>Delete something</button>

      {showDialog && (
        <AlertDialog leastDestructiveRef={cancelRef}>
          <AlertDialogLabel>Please Confirm!</AlertDialogLabel>

          <AlertDialogDescription>
            Are you sure you want to delete something? This action is permanent,
            and we're totally not soft deleting something!
          </AlertDialogDescription>

          <div>
            <button onClick={close}>Yes, delete</button>{" "}
            <button ref={cancelRef} onClick={close}>
              Abort! Don't delete
            </button>
          </div>
        </AlertDialog>
      )}
    </div>
  );
}
```

## Development

(1) Install dependencies

```bash
$ npm i
# or
$ yarn
```

(2) Run initial validation

```bash
$ ./Taskfile.sh validate
```

(3) Run tests in watch-mode to validate functionality.

```bash
$ ./Taskfile test -w
```

---

_This project was set up by @jvdx/core_
npm package: @react-lit/auto-id
Description: Autogenerate IDs to facilitate WAI-ARIA and server rendering. Optionally a user-provided string can be supplied to `useId` instead of auto-generating one.
Author: Joel Voss
Latest version: 0.7.0

# @react-lit/auto-id

Autogenerate IDs to facilitate WAI-ARIA and server rendering.
Optionally a user-provided string can be supplied to `useId` instead of
auto-generating one.

## Installation

```bash
$ npm i @react-lit/auto-id
# or
$ yarn add @react-lit/auto-id
```

## Example

```js
import * as React from 'react';
import { useId } from "@react-lit/auto-id";

// This may be a single form field component.
function Example(props) {
  const id = useId(props.id);
  return (
    <>
      <label htmlFor={id}>{props.label}</label>
      <input type={props.type} name={props.name} id={id} />
    </>
  );
}
```

## Development

(1) Install dependencies

```bash
$ npm i
# or
$ yarn
```

(2) Run initial validation

```bash
$ ./Taskfile.sh validate
```

(3) Run tests in watch-mode to validate functionality.

```bash
$ ./Taskfile test -w
```

---

_This project was set up by @jvdx/core_
npm package: @react-lit/charts
Description: Charting library for react applications that allows you to visualize data with HTML and SVG.
Author: Joel Voss
Latest version: 0.5.0

# @react-lit/charts

Charting library for react applications that allows you to visualize data with
HTML and SVG.

## Installation

```bash
$ npm i @react-lit/charts
# or
$ yarn add @react-lit/charts
```

## Example

See the [`./examples`](./examples) folder for example charts.

## Development

(1) Install dependencies

```bash
$ npm i
# or
$ yarn
```

(2) Run initial validation

```bash
$ ./Taskfile.sh validate
```

(3) Run tests in watch-mode to validate functionality.

```bash
$ ./Taskfile test -w
```

---

_This project was set up by @jvdx/core_
npm package: @react-lit/combobox
Description: Accessible combobox (autocomplete or autosuggest) component for React.
Author: Joel Voss
Latest version: 0.7.0

# @react-lit/combobox

Accessible combobox (autocomplete or autosuggest) component for React.

A combobox is the combination of an `<input type="text" />` and a list.
The list is designed to help the user arrive at a value, but the value does
not necessarily have to come from that list.

## Installation

```bash
$ npm i @react-lit/combobox
# or
$ yarn add @react-lit/combobox
```

## Example

```js
import * as React from 'react';
import {
  Combobox,
  ComboboxInput,
  ComboboxPopover,
  ComboboxList,
  ComboboxOption,
  ComboboxOptionText,
} from "@react-lit/combobox";

function Example() {
  return (
    <Combobox>
      <ComboboxInput aria-labelledby="combobox" />
      <ComboboxPopover>
        <ComboboxList aria-labelledby="combobox">
          <ComboboxOption value="Apple" />
          <ComboboxOption value="Banana" />
          <ComboboxOption value="Orange" />
          <ComboboxOption value="Pineapple" />
          <ComboboxOption value="Kiwi" />
        </ComboboxList>
      </ComboboxPopover>
    </Combobox>
  );
}
```

## Development

(1) Install dependencies

```bash
$ npm i
# or
$ yarn
```

(2) Run initial validation

```bash
$ ./Taskfile.sh validate
```

(3) Run tests in watch-mode to validate functionality.

```bash
$ ./Taskfile test -w
```

---

_This project was set up by @jvdx/core_
npm package: @react-lit/dialog
Description: An accessible dialog or "modal" window.
Author: Joel Voss
Latest version: 0.7.0

# @react-lit/dialog

An accessible dialog or "modal" window.

## Installation

```bash
$ npm i @react-lit/dialog
# or
$ yarn add @react-lit/dialog
```

## Example

```js
import * as React from 'react';
import { Dialog } from "@react-lit/dialog";

function Example() {
  const [showDialog, setShowDialog] = React.useState(false);
  const open = () => setShowDialog(true);
  const close = () => setShowDialog(false);

  return (
    <button onClick={open}>Open Dialog</button>

    <Dialog isOpen={showDialog} onDismiss={close}>
      <button onClick={close}>
        <VisuallyHidden>Close</VisuallyHidden>
        <span aria-hidden>×</span>
      </button>
      <p>I am the Dialog!</p>
    </Dialog>
  );
}
```

## Development

(1) Install dependencies

```bash
$ npm i
# or
$ yarn
```

(2) Run initial validation

```bash
$ ./Taskfile.sh validate
```

(3) Run tests in watch-mode to validate functionality.

```bash
$ ./Taskfile test -w
```

---

_This project was set up by @jvdx/core_
npm package: @react-lit/disclosure
Description: A disclosure is a button that controls visibility of a section of content. When the controlled content is hidden, it is often styled as a typical push button with a right-pointing arrow or triangle to hint that activating the button will display additiona
Author: Joel Voss
Latest version: 0.7.0

# @react-lit/disclosure

A disclosure is a button that controls visibility of a section of content.
When the controlled content is hidden, it is often styled as a typical push
button with a right-pointing arrow or triangle to hint that activating the
button will display additional content. When the content is visible, the
arrow or triangle typically points down.

## Installation

```bash
$ npm i @react-lit/disclosure
# or
$ yarn add @react-lit/disclosure
```

## Example

```js
import * as React from 'react';
import { Disclosure, DisclosureButton, DisclosurePanel } from "@react-lit/disclosure";

function Example() {
  return (
    <Disclosure>
      <DisclosureButton>Expand me!</DisclosureButton>
      <DisclosurePanel>
        Li Europan lingues es membres del sam familie.
        Lor separat existentie es un myth. Por scientie, musica, sport etc,
        litot Europa usa li sam vocabular.
      </DisclosurePanel>
    </Disclosure>
  );
}
```

## Development

(1) Install dependencies

```bash
$ npm i
# or
$ yarn
```

(2) Run initial validation

```bash
$ ./Taskfile.sh validate
```

(3) Run tests in watch-mode to validate functionality.

```bash
$ ./Taskfile test -w
```

---

_This project was set up by @jvdx/core_
npm package: @react-lit/dropdown
Description: A React dropdown menu.
Author: Joel Voss
Latest version: 0.7.0

# @react-lit/dropdown

A React dropdown menu.

## Installation

```bash
$ npm i @react-lit/dropdown
# or
$ yarn add @react-lit/dropdown
```

## Example

```js
import * as React from 'react';
import {
  DropdownProvider,
  DropdownItem,
  DropdownItems,
  DropdownPopover,
  DropdownTrigger,
} from "@react-lit/dropdown";

function Example() {
  return (
    <div>
      <DropdownProvider>
        <DropdownTrigger id="actions-button">
          Actions{" "}
          <span aria-hidden="true" style={{ userSelect: "none" }}>
            ▾
          </span>
        </DropdownTrigger>
        <DropdownPopover>
          <DropdownItems>
            <DropdownItem onSelect={action("Download")}>Download</DropdownItem>
            <DropdownItem onSelect={action("Copy")}>Create a Copy</DropdownItem>
            <DropdownItem onSelect={action("Mark as Draft")}>
              Mark as Draft
            </DropdownItem>
            <DropdownItem onSelect={action("Delete")}>Delete</DropdownItem>
          </DropdownItems>
        </DropdownPopover>
      </DropdownProvider>
    </div>
  );
}
```

## Development

(1) Install dependencies

```bash
$ npm i
# or
$ yarn
```

(2) Run initial validation

```bash
$ ./Taskfile.sh validate
```

(3) Run tests in watch-mode to validate functionality.

```bash
$ ./Taskfile test -w
```

---

_This project was set up by @jvdx/core_
npm package: @react-lit/focus-scope
Description: FocusScope manages focus for its descendants. It supports containing focus inside the scope, restoring focus to the previously focused element on unmount, and auto focusing children on mount.
Author: Joel Voss
Latest version: 0.7.0

# @react-lit/focus-scope

FocusScope manages focus for its descendants. It supports containing focus inside
the scope, restoring focus to the previously focused element on unmount, and
auto focusing children on mount.

## Installation

```bash
$ npm i @react-lit/focus-scope
# or
$ yarn add @react-lit/focus-scope
```

## Example

```js
import * as React from 'react',
import { FocusScope } from '@react-lit/focus-scope';

function Example() {
  const [isOpen, setOpen] = useState(false);
	return (
		<>
			<button onClick={() => setOpen(true)}>Open</button>
			{isOpen && (
				<FocusScope>
					<input aria-label="First input" placeholder="First input" />
					<input aria-label="Second input" placeholder="Second input" />
					<button onClick={() => setOpen(false)}>Close</button>
				</FocusScope>
			)}
		</>
	);
}
```

## Development

(1) Install dependencies

```bash
$ npm i
# or
$ yarn
```

(2) Run initial validation

```bash
$ ./Taskfile.sh validate
```

(3) Run tests in watch-mode to validate functionality.

```bash
$ ./Taskfile test -w
```

---

_This project was set up by @jvdx/core_
npm package: @react-lit/helper
Description: Common helpers for the @react-lit component suite.
Author: Joel Voss
Latest version: 0.7.3

# @react-lit/helper

Common helpers for the @react-lit component suite.

## Installation

```bash
$ npm i @react-lit/helper
# or
$ yarn add @react-lit/helper
```

## Development

(1) Install dependencies

```bash
$ npm i
# or
$ yarn
```

(2) Run initial validation

```bash
$ ./Taskfile.sh validate
```

(3) Run tests in watch-mode to validate functionality.

```bash
$ ./Taskfile test -w
```

---

_This project was set up by @jvdx/core_