open-index/open-npm huggingface dataset:
npm package: @reactgjs/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: ncpa0cpl
Latest version: 0.0.1-beta.4

# 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: @reactgular/chunks
Description: Creates an array of elements split into groups the length of size.
Author: reactgular.com
Latest version: 1.0.1

[![Build Status](https://travis-ci.org/reactgular/chunks.svg?branch=master)](https://travis-ci.org/reactgular/chunks)
[![Coverage Status](https://coveralls.io/repos/github/reactgular/chunks/badge.svg?branch=master)](https://coveralls.io/github/reactgular/chunks?branch=master)
[![npm version](https://badge.fury.io/js/%40reactgular%2Fchunks.svg)](https://badge.fury.io/js/%40reactgular%2Fchunks)

## What is Chunks?

Chunks is a TypeScript library that creates an array of elements split into groups the length of size. If the array can't be split evenly, the
final chunk can be optionally padded with a default value. 

## Installation

To get started, install the package from npm.

```bash
npm install --save @reactgular/chunks
```

## Usage

Chunks is small, simple and easy to use.

```typescript
import {chunks} from '@reactgular/chunks';

console.log(chunks([1,2,3,4,5],2))
// => [[1,2],[3,4],[5]]

console.log(chunks([1,2,3,4,5],2,undefined))
// => [[1,2],[3,4],[5,undefined]]
```

# Getting help

You are welcome to open issues for general support questions as well as bug reports and feature requests.
npm package: @reactgular/devices
Description: Angular library that simplifies working with desktop, tablet and mobile devices.
Author: reactgular.com
Latest version: 2.0.1

[![Build Status](https://travis-ci.org/reactgular/devices.svg?branch=develop)](https://travis-ci.org/reactgular/devices)
[![Coverage Status](https://coveralls.io/repos/github/reactgular/devices/badge.svg?branch=develop)](https://coveralls.io/github/reactgular/devices?branch=develop)
[![npm version](https://badge.fury.io/js/%40reactgular%2Fdevices.svg)](https://badge.fury.io/js/%40reactgular%2Fdevices)

# Devices

Devices is an Angular library that wraps around the `BreakpointObserver`
utility provided by the Angular Material CDK library.

## Overview

Angular Material CDK library provides a `BreakpointObserver` utility
which emits state changes based upon screen and orientation of
the web browser. The problem with this library is that the matching 
rules are broad in scope, and most developers just want to
know what device the user is using.

This library simplifies the business logic of responding to changes in
screen sizes and orientation.

# Install

To get started, install the package from npm. 

```bash
npm install @reactgular/devices
```

Once installed you need to import the `DevicesModule` module into your project.

```typescript
import {DevicesModule} from '@reactgular/devices';

@NgModule({
    ...
    imports: [DevicesModule, ...],
    ...
})
export class AppModule {
}
```

# Usage

You can use the `DevicesService` in your components or services by 
injecting the service. There are a number of observable properties that 
emit values relative to the type of device or orientation.

These properties of the service just make it easier to work with changes
to the device screen.

```typescript
import {DevicesService} from '@reactgular/devices';

@Component({
   selector: 'app-example',
   template: `
    <div *ngIf="web$ | async">Web only</div>
    <div *ngIf="tablet$ | async">Tablet only</div>
    <div *ngIf="handset$ | async">Handset only</div>
   `
})
export class ExampleComponent {
    public web$: Observable<boolean>;
    public table$: Observable<boolean>;
    public handset$: Observable<boolean>;
    public constructor(devices: DevicesService) {
        this.web$ = devices.web$;
        this.tablet$ = devices.tablet$;
        this.handset$ = devices.handset$;
    }
}
```

# Getting help

You are welcome to open issues for general support questions as well as bug reports and feature requests.
npm package: @reacticons/bootstrap-icons
Description: ![](hero.png)
Author: Alexander Schau
Latest version: 1.9.1

# Bootstrap Icons React Component

![](hero.png)

This package contains a simple React Component, which implements the latest version of [Bootstrap Icons](https://github.com/twbs/icons) into React.

## Install

To add the package to your existing React project just type in one of the following commands:

```
npm i @reacticons/bootstrap-icons
```

or

```
yarn add @reacticons/bootstrap-icons
```

## Usage

```js
import React from 'react';
import Icon from '@reacticons/bootstrap-icons';

export const Component = () => (
  <>
    <Icon name="award" />
  </>
);
```

## Supported Icons

This package supports all Bootstrap Icons of the matching version. To see a full list of them, you can take a look at the official [Bootstrap Icons website](https://icons.getbootstrap.com/).

## Hint

By the way, the `<Icon>` Component has the same attributes as a typical `<div>` element.

## License

MIT

> This package is based on the open source Bootstrap Icons project.
npm package: @reacticons/ionicons
Description: ![hero_image.png](hero_image.png)
Author: Alexander Schau
Latest version: 7.1.0

# Ionicons React Component

![hero_image.png](hero_image.png)

This package contains a React Component, which implements the latest version of the official [Ionicons](https://github.com/ionic-team/ionicons) into React.

## Installation 📦

To add the package to your existing React project just type in one of the following commands:

```
npm i @reacticons/ionicons
```

or

```
yarn add @reacticons/ionicons
```

## Usage

```js
import React from 'react';
import IonIcon from '@reacticons/ionicons';

export const Component = () => (
  <>
    <IonIcon name="bag-outline" />
  </>
);
```

### Custom Size

You can specify the icon size by using the optional `size` prop.

```js
<IonIcon name="bag-outline" size="small" />
<IonIcon name="bag-outline" size="large" />
```

## Supported Icons

This package supports all Ionicons of the matching version. To see a full list of them, you can take a look at the official [Ionicons website](https://ionicons.com/).

## Hint

By the way, the `<IonIcon>` Component has the same attributes as a typical `<span>` element.
npm package: @reactiff/app-data-client
Description: Virtual API client for your app anywhere!
Author: Rick Ellis
Latest version: 1.0.0

# @reactiff/app-data-client

Virtual API client for your app anywhere!

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

<br>

```
then to start
```bash
# in one tab
yarn start

# in another tab
cd example
yarn start
```

# 4. Publish package first time
```bash
npm publish --access public
```

> DELETE THE ABOVE INSTRUCTIONS AFTER YOU'RE DONE

## Install

```bash
yarn add @reactiff/app-data-client
```

## Usage

```tsx
import Component from '@reactiff/app-data-client'

const instance = new Component();

// do stuff with it
```

## Publishing the package to npm

First time (with free account) if scoped, must set access to public
```bash
npm publish --access public
```

To update
```bash
npm version major|minor|patch
```

and then simply
```bash
npm publish
```

---

## License

MIT © [Rick Ellis](https://github.com/reactiff)
npm package: @reactiff/lib-ts-test
Description: Test of TypeScript component library (not React
Author: Rick Ellis
Latest version: 1.0.1

# test

> Made with create-react-library

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

## Install

```bash
yarn add @reactiff/lib-ts-test
```

## Usage

```tsx
import LibTsTest from '@reactiff/lib-ts-test'

const options: LibTsTestOptions = {
  operation: 'sum',
};

const x = new LibTsTest(options);

const r = x.compute(1, 2, 3);

console.log(r);
// output: 6
```

## Setting up local development for this repo or a clone of it

In project root

```bash
yarn link
yarn install
yarn start

```

then to run the example

```bash
cd example

yarn link "@reactiff/lib-ts-test"
yarn install
yarn start

```

## License

MIT © [reactiff](https://github.com/reactiff)
npm package: @reactiff/midi
Description: React library for interfacing with MIDI controllers
Author: Rick Ellis
Latest version: 2.0.1

# @reactiff/midi

React library for interfacing with MIDI controllers

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

## Install

Big news!  Version 2.0 now supports ColorPaletteEditor!

```bash
yarn add @reactiff/midi
```

## Usage

```tsx
import { useState } from 'react'
import * as ui from '@reactiff/ui-core'
import { MidiColorPaletteEditor } from '@reactiff/midi'
import { MidiProvider } from '@reactiff/midi'

export default const DetachablePaletteEditor = () => {

  const [palette, setPalette] = useState<any>({
    primaryColor: 'royalblue',
    secondaryColor: 'pink',
    danger: 'red',
  })

  const handleChange = (p: any) => {
    setPalette(p)
  }

  return (
    <MidiProvider>
      <ui.row>
        <ui.col>
          <HotPreview palette={palette} />
        </ui.col>
        <ui.col>
          <MidiColorPaletteEditor
            id="demo-detachable-color-palette-editor-with-midi-fast-refresh-and-auto-save"
            palette={palette}
            onChange={setPalette}
            detachable={true}
          />
        </ui.col>
      </ui.row>
    </MidiProvider>
  )
}
```

You can supply your own Preview, which used the palette, or update the whote Theme to see changes everywhere!
```tsx
const HotPreview = (props: any) => {
  const { palette } = props
  return (
    <ui.col>
      <ui.div>Header</ui.div>
      <ui.div>
        <p>{ui.loremIpsum.paragraphs(1)}</p>
      </ui.div>
      <ui.div>
        <button>Primary</button>
        <button>Secondary</button>
      </ui.div>
    </ui.col>
  )
}
```

## Events

| Event | Description |
| ----- | ----------- |
| onTouchStart | Fired when a pad is tapped or a touch starts |
| onAfterTouch | Fired in rapid succession reflecting changing pressure, when the pad has and is configured to respond to pressure changes.  Check the documentation of your device. |
| onTouchEnd | Fired when a pad touch ends |
| onNoteOn | Fired for each piano key pressed.  If a chord of three notes is played, this event is fired three times |
| onNoteOff | Fired for each piano key released |
| onParameterChange | Fired as a Rotary Knob is turned.  |
| onUnknownEvent | This event will be deprecated in the near future.  Do not use in production. |

            



## Publishing the package to npm

First time (with free account) if scoped, must set access to public
```bash
npm publish --access public
```

To update
```bash
npm version major|minor|patch
```

and then simply
```bash
npm publish
```

---

## License

MIT © [Rick Ellis](https://github.com/reactiff)
npm package: @reactiff/random-walk
Description: Generates random number sequences that are more characteristic of Price Movements i.e. trending.
Author: Rick Ellis
Latest version: 1.0.0

# @reactiff/random-walk

Generates random number sequences that are more characteristic of Price Movements i.e. trending.

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



## Install

```bash
yarn add @reactiff/random-walk
```

## Usage

```tsx
import RandomWalk from '@reactiff/random-walk'

const rndWalk = new RandomWalk(
    1,      // min:         number
    1000,   // max:         number
    500,    // start:       number
    10,     // maxTrend:    number - max number of steps
    10      // maxStep:     number - max step size 
);

const generatePrice = () => {
    
    console.log( rndWalk.next() );
    
    // run again after delay
    setTimeout(generatePrice, 500);
}

generatePrice();
```

---

## Publishing the package to npm

```bash
# if scoped and free account
npm publish --access public

# otherwise
npm publish

```

to update
```bash
npm version major|minor|patch
```

and then simply
```bash
npm publish
```

---


## License
MIT © [Rick Ellis](https://github.com/reactiff)
npm package: @reactiff/reactiff-generic-package
Description: Made with create-react-library
Author: reactiff
Latest version: 1.0.2

# reactiff-generic-package

> Made with create-react-library

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

## Install with npm or yarn

```bash
npm install --save @reactiff/reactiff-generic-package

```
```bash
yarn add @reactiff/reactiff-generic-package

```


## Usage

```jsx
import React, { Component } from 'react'

import MyComponent from 'reactiff-generic-package'
import 'reactiff-generic-package/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}
```

## License

MIT © [reactiff](https://github.com/reactiff)
npm package: @reactiff/ui-core
Description: React UI toolkit with @MUI
Author: Rick Ellis
Latest version: 5.0.2

# @reactiff/ui-core

UI toolkit foundation

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


```bash
yarn add @reactiff/ui-core
```

## Usage

```tsx
import * as ui from '@reactiff/ui-core'

return <ui.div>HELLO</ui.div>;

```

## useGridSize()
```tsx

const { code, value } = ui.useGridSize();

```

| Code | Value | Screen Width      |
| ---- | ----- | -------------     |
| xs   | 1     | (less than small) |
| sm   | 2     | > 576         |
| md   | 3     | > 768         | 
| lg   | 4     | > 992         |
| xl   | 5     | > 1200        |
| xxl  | 6     | > 1400        | 
| xxxl | 7     | > 1600        | 

---

## License

MIT © [Rick Ellis](https://github.com/reactiff)
npm package: @reactify-apps/search
Description: React UI library for Reactify Search
Latest version: 2.1.1

# Reactify Search UI

This library provides React components and hooks for building UI's for the [Reactify Search](https://bitbucket.org/usereactify/reactify-search) app.

The aim of this library is not to build a search and filter interface from the ground up. The aim of this library is to abstract the complexities of Reactify Search, whilst providing the developer a wide range of approaches and escape hatches to build in the way they want to. To do this, we wrap a mature Elasticsearch UI library called [Reactivesearch](https://github.com/appbaseio/reactivesearch) (similar name, but completely unaffiliated with Reactify Search).

## Getting started

```sh
npm install @reactify-apps/search
```

You should always begin with the `Provider` component, which you need to pass the Reactify Search config and index name, using whichever mechanism is most appropriate for your project. Within the provider, you can then begin to render components from the `@reactify-apps/search` package or ordinary [Reactivesearch](https://github.com/appbaseio/reactivesearch) components.

```tsx
import { Provider } from "@reactify-apps/search";

export const YourComponent: React.FC = () => {
  return (
    <Provider index="my-cool-shop" config={config}>
      <YourComponents />
    </Provider>
  );
};
```

## Contributing

```sh
# install dependencies
npm install

# watch and build the package
npm run watch

# serve storybook to interact with components
npm run storybook

# release a version
npm run release
```
npm package: @reactify-components/smooth-number-counter
Description: 동적으로 숫자가 카운팅되는 숫자 카운터 컴포넌트 입니다.
Author: kim elijah sol & Innei
Latest version: 0.0.2

# React Smooth Number Counter

동적으로 숫자가 카운팅되는 숫자 카운터 컴포넌트 입니다.

![screen-shot](https://user-images.githubusercontent.com/86874556/134227710-f7b8c0af-9de4-4d98-a9ed-a9a05a57e005.gif)

## installation

---

using npm

```bash
npm i react-smooth-number-counter
```

using yarn

```bash
yarn add react-smooth-number-counter
```

<br/>

## Example

---

page.js

```
import React from 'react'
import NumberCounter from 'react-smooth-number-counter'

const Page = () => {

    return (
        <NumberCounter
            value={312039}
            suffix='₩/KRW'
            transition={1000}
        />
    )

}

export default Page

```

## Props

---

```
{
    value : number
    표시될 숫자 값입니다.

    transition? : number
    숫자 값이 렌더링 완료될 시간입니다.
    기본값은 1000ms 입니다.

    suffix? : string
    원, %, $ 등의 접미사 텍스트입니다.

    className? : string
    최상위 element에 사용될 className 입니다.

    id? : string
    최상위 element에 사용될 id입니다.
    미전달 시 자동으로 id를 생성하여 적용합니다.

    align? : 'left' | 'center' | 'right'
    글자들이 정렬될 기준점입니다.
    align에 따라 숫자들이 움직일지, 접미사가 움직일지 등이 결정됩니다.
    기본값은 'left' 입니다.
}
```