open-index/open-npm huggingface dataset:
npm package: @react-noui/use-fetch
Description: React counter context/provider
Author: taystack
Latest version: 0.0.2

# use-promise
[![gzip size](https://img.badgesize.io/https://unpkg.com/react-noui/use-promise?compression=gzip&amp;style=flat-square)](https://unpkg.com/react-noui/use-promise)
[![npm version](https://img.shields.io/npm/v/react-noui/use-promises.svg?style=flat-square)](https://www.npmjs.com/package/react-noui/use-promise)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

`use-promise` helps cache responses from network calls. Supports `React.Suspense`.

# Installation
```bash
yarn add @react-noui/use-promise
```
Or with `npm`
```bash
npm install --save @react-noui/use-promise
```

# Setup
```jsx
// App.tsx
const AppCache = createReactCache();

function App() {
  return (
    <AppCache.Provider>
      <FetchesTodos />
    </AppCache.Provider>
  )
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
```

# Example
This example implements `FetchesTodos` from the above example. Supported by `React.Suspense`.
```jsx
import { useFetch } from '@react-noui/use-promise';

type Todo = {
  id: number;
  title: string;
  completed: boolean;
  userId: number;
}

function FetchesTodos() {
  return (
    <React.Suspense fallback={<FetchesTodosLoading />}>
      <FetchesTodosLazy />
    </React.Suspense>
  );
}

function FetchesTodosLazy() {
  const todos = useFetch('https://jsonplaceholder.typicode.com/todos');
  // Todo[]
}

function FetchesTodosLoading() {
  return <div>Loading Todos...</div>
}
```
npm package: @react-observatory/inject-epic
Description: Dynamic epic injection for Redux Observable apps
Author: Eduard Kyvenko
Latest version: 0.1.1

# @react-observatory/inject-epic

[Higher-Order Component](https://reactjs.org/docs/higher-order-components.html) and a few helpers for dynamic [Epic](https://redux-observable.js.org/docs/basics/Epics.html) injection.

## Install

```
npm install --save @react-observatory/inject-epic
```
npm package: @react-observatory/inject-reducer
Description: Dynamic reducer injection for Redux apps
Author: Eduard Kyvenko
Latest version: 0.1.2

# @react-observatory/inject-reducer

[Higher-Order Component](https://reactjs.org/docs/higher-order-components.html) and a few helpers for dynamic [Reducer](https://redux.js.org/basics/reducers) injection.

## Install

```
npm install --save @react-observatory/inject-reducer
```
npm package: @react-observatory/with-action
Description: Dynamic reducer and epic injection for Redux Observable apps
Author: Eduard Kyvenko
Latest version: 0.1.4

# @react-observatory/with-action

[Higher-Order Component](https://reactjs.org/docs/higher-order-components.html) for dispatching an [Action](https://redux.js.org/basics/actions), when component is mounted.

## Install

```
npm install --save @react-observatory/with-action
```
npm package: @react-observatory/with-router-action
Description: Dynamic reducer and epic injection for Redux Observable apps
Author: Eduard Kyvenko
Latest version: 0.1.1

# @react-observatory/with-router-action

[Higher-Order Component](https://reactjs.org/docs/higher-order-components.html) for dispatching an [Action](https://redux.js.org/basics/actions) with the payload from the [Router](https://github.com/ReactTraining/react-router) context, when component is mounted.

## Install

```
npm install --save @react-observatory/with-router-action
```
npm package: @react-org/hooks
Description: curated list of reusable custom hooks
Author: https://github.com/naiduprakash
Latest version: 0.1.5

# hooks

> curated list of reusable custom hooks

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

## Install

```bash
npm i @react-org/hooks
```

## Usage
> work in progress

## License

MIT © [https://github.com/naiduprakash](https://github.com/https://github.com/naiduprakash)
npm package: @react-os/core
Description: <h1 align="center">@react-os/core</h1>
Author: lifercode
Latest version: 0.1.10

<h1 align="center">@react-os/core</h1>

<p align="center">
  <a href="https://www.npmjs.com/package/@react-os/core"><img src="https://flat.badgen.net/npm/dt/@react-os/core" alt="NPM" /></a>
  <a href="https://www.npmjs.com/package/@react-os/core"><img src="https://flat.badgen.net/npm/v/@react-os/core" alt="@react-os/core version" /></a>
  <a href="https://www.npmjs.com/package/@react-os/core"><img src="https://flat.badgen.net/npm/license/@react-os/core" alt="@react-os/core license" /></a>
</p>
<h3 align="center">
  <a href="https://react-os-docs.netlify.app">Docs</a> -
  <a href="https://react-os-demo.netlify.app">Demo</a>
</h3>
<p align="center">
  <b>Refreshed</b> UI components for your vintage web OS.</p>

![Screenshot 3](assets/screenshot-2.png)

# Getting Started

First, install component library in your project directory:

```sh
# yarn
$ yarn add @react-os/core

# npm
$ npm install @react-os/core
```

Set OSProvider in your app with config of your choice... and you are ready to go!

```jsx
import React from 'react'
import { Frame } from 'react95'
import { React95Provider, OsProvider, OsWindow } from '@react-os/core'

const Notes = ({ data }) => (
  <OsWindow size={[540,480]}>
    <Frame variant="field">
      <p>
        {data.label} is an example of a program!
      </p>
    </Frame>
  </OsWindow>
)

const App = () => (
  <React95Provider>
    <OsProvider
      programs={[
        {
          menu: true,
          desktop: true,
          label: "Notes",
          icon: "address_book_pad",
          component: props => <Notes {...props} />
        },
        // more programs here...
      ]}
    />
  </React95Provider>
)

export default App
```

# Screenshots

![Screenshot 1](assets/screenshot-0.png)
![Screenshot 2](assets/screenshot-1.png)
<!-- ![Screenshot 3](assets/screenshot-2.png) -->

# Submit your project

Apps built with ReactOS will be featured on the official [website](https://react-os-docs.netlify.app).

# Contributing

If you want to help with the project, feel free to open pull requests and submit issues or component proposals. Let's bring this UI back to life.
npm package: @react-overlay-manager/devtools
Description: Developer tools for React Overlay Manager - visual debugging and management interface
Author: Mateusz Kuplowski
Latest version: 0.2.3

# @react-overlay-manager/devtools

Developer tools for `react-overlay-manager` that provide real-time visualization and debugging capabilities for overlay management.

## Highlights

- **Real-time state**: Inspect the current overlay stack with live updates
- **Interactive debugging**: Close and Show/Hide overlays, copy ID and props JSON, and view basic metadata
- **Search & sort**: Filter by name/ID, sort by Recent, Visible first, or Name
- **Professional UX**: Draggable panel, resizable via bottom bar and bottom-right corner, position/size persist across sessions
- **Quick access**: Floating badge button (draggable) shows active count; keyboard shortcuts to toggle/close
- **Development-only**: Automatically a no-op in production builds

## Installation

```bash
pnpm add -D @react-overlay-manager/devtools
# or: npm i -D @react-overlay-manager/devtools
```

## Usage

Render the DevTools next to your `OverlayManager`. It automatically renders nothing in production.

```tsx
import { OverlayManagerDevtools } from '@react-overlay-manager/devtools';
import {
  OverlayManager,
  createOverlayManager,
} from '@react-overlay-manager/core';

const manager = createOverlayManager(yourRegistry);

function App() {
  return (
    <>
      {/* Your app content */}
      <OverlayManager manager={manager} />
      {/* DevTools renders only in development */}
      <OverlayManagerDevtools manager={manager} />
    </>
  );
}
```

## UI/UX Details

- **Floating button**
  - Bottom-right by default, shows label "Overlays" and a live count
  - Draggable; position persists while the app is running
  - Click to open the panel

- **Panel**
  - **Drag to move**: grab the header to reposition the window; position is clamped to the viewport and persisted
  - **Resize**: drag the bottom bar (height) or the bottom-right corner (width & height); size persists
  - **Search & sort**: filter by name or ID; sort by Recent, Visible first, or Name
  - **List**: shows each overlay with a visibility badge and ID
  - **Details**: when selected, see component name, ID, visibility, props (pretty/raw), and actions
    - Actions: Close; Show/Hide toggle; Copy ID; Copy props JSON

- **Keyboard shortcuts**
  - Toggle open/close: `Ctrl/⌘ + Shift + O`
  - Close panel: `Escape`
  - Shortcuts are ignored while typing in `input`, `textarea`, or `contenteditable` targets

## Development

- DevTools are exported as `OverlayManagerDevtools`, which is a pass-through to the real component in development and a `null` component in production
- Built with React + TypeScript and inline styles to avoid conflicts

## Building

```bash
cd packages/devtools
pnpm build
```

## Contributing

Contributions welcome! Please run the test suite in the monorepo root before submitting PRs.
npm package: @react-overlay/overlays
Description: [![NPM](https://img.shields.io/npm/v/@react-overlay/overlays.svg)](https://www.npmjs.com/package/@react-overlay/overlays)
Author: relaxgo
Latest version: 0.1.2

# react-overlay

[![NPM](https://img.shields.io/npm/v/@react-overlay/overlays.svg)](https://www.npmjs.com/package/@react-overlay/overlays)

## Install

```bash
npm install --save @react-overlay/overlays
```

## Usage

Add OverlayProvider on the root, and mount all your overlay container
```tsx
import React, { Component } from 'react'

import { OverlayProvider, ModalOverlay } from '@react-overlay/overlays';
import '@react-overlay/overlays/style.css';
import Content from './Content';

const container = document.getElementById('root');
const root = createRoot(container!);
root.render(
  <>
    <OverlayProvider>
      <Content />
      <ModalOverlay />
    </OverlayProvider>
  </>
);
```

Then it's easy to open your modal or other components by a hook. the modal will be mounted on the root.
```tsx
import { useModalOverlay } from '@react-overlay/overlays';
import InfoModal from './overlays/InfoModal';

export default function Content() {
  const modalOverlay = useModalOverlay();

  const handleOpenModal = () => {
    const modal = <InfoModal />;
    modalOverlay.open(modal);
  };

  return (
    <div>
      <h1 className="title">test</h1>
      <button onClick={handleOpenModal}>open a modal </button>
      <style jsx>{`
        .title {
          margin: 10px;
        }
      `}</style>
    </div>
  );
}
```

## License

MIT © [relaxgo](https://github.com/relaxgo)
npm package: @react-p5/sketch
Description: This Component lets you integrate p5 Sketches into your React App
Author: Xander Low
Latest version: 0.3.3

![@react-p5/sketch](./share-card.png)

[![npm/v](https://badgen.net/npm/v/@react-p5/sketch)](https://npmjs.com/package/@react-p5/sketch)
[![npm/dt](https://badgen.net/npm/dt/@react-p5/sketch)](https://npmjs.com/package/@react-p5/sketch)
[![stars](https://badgen.net/github/stars/react-p5/react-p5)](https://github.com/react-p5/react-p5)

I will write up detailed docs in the next minor release.
npm package: @react-packages/ellipsis
Description: React component that gives an ellipsis mark on an overflow text without needing to set a fixed length. It can comportably be used in a responsive design.
Author: AT Mulyana
Latest version: 1.0.0

# @react-packages/ellipsis
It's React component that gives an ellipsis mark on an overflow text without needing to set a fixed
length. It can comportably be used in a responsive design.

Please see this [documentation](https://atmulyana.github.io/react-packages/ellipsis/) and this
[`example`](https://github.com/atmulyana/react-packages/tree/main/example/app/routes/ellipsis.tsx).
npm package: @react-packages/file-upload
Description: React component which extends HTML file input by adding a view for the uploaded file(s). The view is to make sure that we're uploading the correct file(s).
Author: AT Mulyana
Latest version: 1.0.0

# @react-packages/file-upload
React component which extends HTML file input by adding a view for the uploaded file(s).
The view is to make sure that we're uploading the correct file(s).

![File Upload Video](https://atmulyana.github.io/react-packages/file-upload/input.gif)

Please see this [documentation](https://atmulyana.github.io/react-packages/file-upload/) and this
[example](https://github.com/atmulyana/react-packages/tree/main/example/app/routes/file-upload.tsx).
npm package: @react-packages/image-thumbnail
Description: React component to create a thumbnail of an exisiting `<img/>` element without creating a new `<img/>` with the same `src`. Useful for a non-cached/dynamic image because of no double request to the server.
Author: AT Mulyana
Latest version: 1.1.0

# @react-packages/image-thumbnail
React component to create a thumbnail of an exisiting `<img/>` element without creating a new
`<img/>` with the same `src`. It's useful if the image is a non-cached/dynamic resource and the
thumbnail is created asynchronously. If we use another `<img/>` with the same `src` but smaller
size then it will trigger another request to the server for the same resouce.

Please see this [documentation](https://atmulyana.github.io/react-packages/image-thumbnail/) and this
[example](https://github.com/atmulyana/react-packages/tree/main/example/app/routes/image-thumbnail.tsx).
npm package: @react-packages/keywords
Description: React component to input some keywords for database indexing or the metadata of search engine
Author: AT Mulyana
Latest version: 1.0.0

# @react-packages/keywords
It's React component to input some keywords for database indexing or the metadata of search engine.
It has the interface to add or delete a keyword easily.

![Input Image](https://atmulyana.github.io/react-packages/keywords/input.gif)

Please see this [documentation](https://atmulyana.github.io/react-packages/keywords/) and this
[`example`](https://github.com/atmulyana/react-packages/tree/main/example/app/routes/keywords.tsx).
npm package: @react-packages/rect
Description: Flex Box that keeps the aspect ratio between its height and width even when it's resized
Author: AT Mulyana
Latest version: 1.0.0

# @react-packages/keywords
It's React component to render a flex box that keeps the aspect ratio between its height and width
even when it's resized.

Please see this [documentation](https://atmulyana.github.io/react-packages/rect/) and this
[`example`](https://github.com/atmulyana/react-packages/tree/main/example/app/routes/rect.tsx).
npm package: @react-packages/simple-images-slider
Description: React component to display the images slider (carousel)
Author: AT Mulyana
Latest version: 1.0.1

# @react-packages/simple-images-slider
React component to display the images slider (carousel).

![Slider Video](https://atmulyana.github.io/react-packages/simple-images-slider/slider.gif)

Please see this [documentation](https://atmulyana.github.io/react-packages/simple-images-slider/) and this
[example](https://github.com/atmulyana/react-packages/tree/main/example/app/routes/simple-images-slider.tsx).
npm package: @react-packages/sortable-list
Description: React component that can rearrange an item position in the list by dragging it to the expected position (can change the order of items)
Author: AT Mulyana
Latest version: 1.0.0

# @react-packages/sortable-list
React component that can rearrange an item position in the list by dragging it to the expected
position (can change the order of items).

![Horizontal List](https://atmulyana.github.io/react-packages/sortable-list/horizontal.gif)

![Vertical List](https://atmulyana.github.io/react-packages/sortable-list/vertical.gif)

Please see this [documentation](https://atmulyana.github.io/react-packages/sortable-list/) and this
[`example`](https://github.com/atmulyana/react-packages/tree/main/example/app/routes/sortable-list.tsx).
npm package: @react-page-plugins/slate-table
Description: react-page plugin for slate table
Author: Junmin Ahn
Latest version: 0.1.0-alpha.12

# @react-page-plugins/slate-table

[ReactPage](https://github.com/react-page/react-page) plugin for slate table

## Installation

```sh
$ npm install @react-page-plugins/slate-table
```

```sh
$ yarn add @react-page-plugins/slate-table
```

## Usage

```js
import React, { useState } from 'react';
import Editor, { ValueWithLegacy } from '@react-page/editor';
import table from '@react-page-plugins/slate-table';

import '@react-page/editor/lib/index.css';
import '@react-page-plugins/slate-table/lib/index.css';
import 'rc-slider/assets/index.css';

const cellPlugins = [table()];

export default function ExamplePage() {
  const [value, setValue] = useState<ValueWithLegacy>({} as ValueWithLegacy);

  const handleChange = (val: any) => {
    setValue(val);
  };

  return (
    <Editor cellPlugins={cellPlugins} value={value} onChange={handleChange} />
  );
}
```
npm package: @react-page-transition/core
Description: ## Why?
Author: uncleseneca
Latest version: 1.2.9

# @react-page-transition/core

## Why?

To create page transitions with any router without pain

Allows to create route-based animations (different animations for different route combinations)

## Install

```sh
yarn add @react-page-transition/core
```

## Usage

To start annimating pages you need to do 2 things (there is an example below):

- make animations config with CSS transitions
- wrap your route components with `<PageTransition />` and use suitable hook (like [@react-page-transition/use-nextjs](https://github.com/Uncleseneca/react-page-transition-use-nextjs))

## Example:

### 1) config

We use express-like routes and classNames list from react-transition group

```
const routeAnimations = [
  {
    prevRoute: '/home',
    nextRoute: '/career/:id',
    styles: {
      enter: 'my-enter',
      enterActive: 'my-active-enter',
      exit: 'my-exit',
      exitActive: 'my-active-exit',
    },
  },

  // or if you're using CSS-modules you can import whole CSS file, where classes named like 'enter', 'enterActive' etc
  {
    prevRoute: '/about',
    nextRoute: '/home',
    styles: backwardsCSSfile,
  },
]
```

### 2) `<PageTransition />`

```
import { PageTransition } from '@react-page-transition/core' // the core component
import { createUseNextRouter } from '@react-page-transition/use-nextjs' // one of the hooks for different routers
...
  <PageTransition
    useRouter={createUseNextRouter()}
    timeout={{ enter: 900, exit: 900 }}
    routeAnimations={routeAnimations}
  >
    <Component {...pageProps} />
  </PageTransition>
```

## Other examples
Available in [examples](./examples)

## Requirements

### React 16.8 and higher

## Router plugins

To use page transitions with every router you need a suitable plugin

[@react-page-transition/use-nextjs](https://github.com/Uncleseneca/react-page-transition-use-nextjs) is currently available for nextjs users
npm package: @react-page-transition/use-nextjs
Description: ## Plugin for [@react-page-transition/core](https://github.com/Uncleseneca/react-page-transition-core) to use with nextjs
Author: uncleseneca
Latest version: 1.2.5

# @react-page-transition/use-nextjs

## Plugin for [@react-page-transition/core](https://github.com/Uncleseneca/react-page-transition-core) to use with nextjs

## Install

```sh
yarn add @react-page-transition/use-nextjs
```

## Example

```
import { PageTransition } from '@react-page-transition/core' // the core component
import { createUseNextRouter } from '@react-page-transition/use-nextjs' // one of the hooks for different routers
...
  <PageTransition
    useRouter={createUseNextRouter()}
    timeout={{ enter: 900, exit: 900 }}
    routeAnimations={routeAnimations}
  >
    <Component {...pageProps} />
  </PageTransition>
```

## Requirements

### React 16.8 and higher
npm package: @react-page/create-plugin-materialui
Description: **This package is deprecated and no longer required**
Author: ORY GmbH
Latest version: 2.2.10

**This package is deprecated and no longer required**

instead, you can declare a schema directly on any plugin:

```tsx
import { CellPlugin } from '@react-page/editor';

type Data = {
  // something
}
const myPlugin: CellPlugin<Data> = {
  Renderer: ({ data }) =>
    <YourComponent data={data}/>
  id: 'plugin-id',
  title: 'Some plugin',
  description: 'This is some plugin',
  version: 1,
  controls: {
    type: 'autoform',
    schema: {
      properties: {
        // your json schema
      },
      required: [],
    },
  },
};
```

# createPluginMaterialUi

With `@react-page/create-plugin-materialui` its easy to create new plugins with custom properties.
It uses [uniforms](https://uniforms.tools) to create the form based on a JSONSchema you provide and will show it in a bottomToolbar similar to the other plugins.

Notice: It is in active development and its api might change, but we would love to get your feedback about it!

_It will only load the form-libraries, if the Editor is in edit mode (See section in the readme about lazy load)! So don't worry about bundle size!_

## Example

```tsx
import { createContentBase } from '@react-page/create-plugin-materialui';
import React from 'react';

const yourCustomPlugin = createContentPlugin({
  Renderer: ({ state }) => (
    <div>
      <p>I am a custom plugin</p>
      <p>this is my configuration:</p>
      <p>Firstname: {state.firstName}</p>
      <p>Lastname: {state.lastName}</p>
      <p>Age: {state.age}</p>
    </div>
  ),
  name: 'custom-content-plugin',
  text: 'Custom content plugin',
  description: 'Some custom content plugin',
  version: '0.0.1',
  // see uniforms for more information on these schemas
  schema: {
    properties: {
      firstName: { type: 'string' },
      lastName: { type: 'string' },
      age: {
        description: 'Age in years',
        type: 'integer',
        minimum: 0,
      },
    },
    required: ['firstName', 'lastName'],
  },
});
```

## Custom form control fields

If you have a property that is more complicated like e.g. an ImageUploadField,
you can pass your components to the schema, see this section on uniforms: https://uniforms.tools/docs/tutorials-creating-custom-field

Make sure that you lazy-load your custom components:

```tsx
import { lazyLoad } from "@react-page/core"

const MyCustomImageUploadField = lazyLoad(() => import("./path/to/MyCustomImageUploadField));

const yourCustomPlugin = createContentPlugin({
    schema: {
      properties: {
        pictureUrl: {
            type: 'string',
            uniforms: {
                component: MyCustomImageUploadField
            }
        }
      },
    },
  });
```

If you don't lazy load your form components, you might increase your bundle size.

## create layout plugins

its also possible to create layout plugins:

```tsx
import { createLayoutPlugin } from '@react-page/create-plugin-materialui';
```
npm package: @react-page/slate-react-presentation
Description: a presentation component for the slate editor
Author: Samuel Stecher
Latest version: 0.1.1

# Slate Presentation

This is a small package that lets you render a [slate.js](https://github.com/ianstormtaylor/slate) document without the overhead of the actual editor.

## Install
Install with yarn:
```
yarn add slate-react-presentation
```
or install with npm:
```
npm install --save slate-react-presentation
```

## Usage

To use this package, simply pass your slate.js document as the `value` along with your `renderElement` and `renderLeaf` functions. Instead of rewriting them, you can also reuse the render functions from your actual editor - this package *should* be 100% compatible with slate.js.

```js
import React, { useCallback } from 'react';
import { SlateReactPresentation } from 'slate-react-presentation';

export function MyDisplayComponent({ document }) {
    const renderElement = useCallback(({ attributes, children, element }) => {
        switch(element.type) {
            case 'h1':
                return <h1 {...attributes}>{children}</h1>
            
            // ...

            default:
                return <p {...attributes}>{children}</p>
        }
    }, []);

    const renderLeaf = useCallback(({ attributes, children, leaf }) => {
        if(leaf.bold) {
            children = <b>{children}</b>
        }

        // ...

        return <span {...attributes}>{children}</span>
    }, []);


    return (
        <SlateReactPresentation 
            value={document} // [{ type: 'h1' children: [ ... ]}, ...]
            renderElement={renderElement}
            renderLeaf={renderLeaf}
            />
    )
}
```