open-index/open-npm huggingface dataset:
npm package: @react.native.web/webview
Description: React Native for Web implementation of RN's WebView
Author: Louis Lagrange
Latest version: 1.0.3

# react-native-web-webview

**This is a variant version of X, currently in an unstable state.**

> React Native for Web implementation of RN's WebView

## Getting started

`$ npm install react-native-web-webview --save`

Alias the package in your webpack config:

```
resolve: {
    alias: {
        'react-native': 'react-native-web',
        ...
        'react-native-webview': 'react-native-web-webview',
    }
}
```

Add the following rule to your webpack config:

```js
const rule = {
  test: /postMock.html$/,
  use: {
    loader: 'file-loader',
    options: {
      name: '[name].[ext]',
    },
  },
};
```

## Usage

```js
import { WebView } from 'react-native-webview';
```

See [RN's doc](https://github.com/react-native-community/react-native-webview).

Supported props are:

- `source`
- `onMessage`
- `scrollEnabled`
- `injectedJavaScript`
- `style`

Additional, web-specific props are:

- `newWindow`: (_boolean_|_{ name: string, features: string}_)
  This will open the source in a new window, optionally giving it an [internal name and custom features](https://developer.mozilla.org/en-US/docs/Web/API/Window/open).
  By default, the name is `webview` and there are no features set.
  This is useful when your target has X-Frame-Options or a no-CORS policy.
  It currently only supports a `source` prop with a `method` set to `POST`.
  Please feel free to do a PR to support more request types!
- `title`: (_string_) This prop will set the `webview` title.

## Examples

See the [storybook](https://react-native-web-community.github.io/react-native-web-webview/storybook).

## Contributing

PRs are welcome!
npm package: @react2svelte/swipable
Description: Svelte swipe event handler ported from react-swipeable
Latest version: 0.1.4
Deprecated: This package has been renamed to @react2svelte/swipeable

# @react2svelte/swipable

This package has been renamed to **reac2svelte/swipeable** (with an _e_).

Github: https://github.com/react2svelte/swipeable

NPM: https://www.npmjs.com/package/@react2svelte/swipeable
npm package: @react3l/advanced-filters
Description: Advanced filters for React3L
Author: thanhtunguet
Latest version: 1.1.0

@react3l/advanced-filters
-------------------------

# Installation

- Add `.npmrc`:

    ```npmrc
    @react3l:registry=https://npm.pkg.github.com
    ```

## IdFilter

For primary key in integer format

```typescript
export declare class IdFilter extends Filter {
    equal?: number;

    notEqual?: number;

    in?: number[];

    notIn?: number[];
}
```

## GuidFilter

For primary key in GUID format

```typescript
export declare class GuidFilter extends Filter {
    equal?: string;

    notEqual?: string;

    in?: string[];

    notIn?: string[];
}
```

## DateFilter

For date/time fields

```typescript
import {Moment} from 'moment';

export declare class DateFilter extends Filter {
    equal?: Moment;

    notEqual?: Moment;

    greater?: Moment;

    greaterEqual?: Moment;

    less?: Moment;

    lessEqual?: Moment;

    range?: [Moment | null, Moment | null];
}
```

## NumberFilter

For number fields

```typescript
import { Filter, FilterType } from 'Filter';

export declare class NumberFilter extends Filter {
    equal?: number;

    notEqual?: number;

    greater?: number;

    greaterEqual?: number;

    less?: number;

    lessEqual?: number;

    range?: [number | undefined, number | undefined];
}
```

## StringFilter

```typescript
import { Filter, FilterType } from 'Filter';
export declare class StringFilter extends Filter {
    startWith?: string;

    notStartWith?: string;

    endWith?: string;

    notEndWith?: string;

    equal?: string;

    notEqual?: string;

    contain?: string;

    notContain?: string;
}
```

&copy; 2020 thanhtunguet <ht@thanhtunguet.info>
npm package: @react3l/react3l
Description: @react3l/react3l ----------------
Latest version: 4.0.2

@react3l/react3l
----------------

React3L v4 has been fully rewritten from scratch. This repository now contains the core code, common services and repositories which are used in almost cases (both for web and mobile)

# Installation

Config `.nmprc` to download packages from GitHub registry:
```npmrc
@react3l:registry=https://npm.pkg.github.com
registry=https://registry.npmjs.org
```

Install packages:
```sh
yarn add @react3l/react3l axios rxjs @react3l/axios-observable moment react-i18next i18next yup
```

Install dev packages:
```sh
yarn add -D react3l-cli i18next-extractor npm-run-all
```

#### Repository

Repository is the layer which contains all data accession code. (HTTP API, LocalStorage, AsyncStorage, Database, ...).

Most of repository's methods are API calls, which can be Promise or Observable (rxjs).

If a repository data access task is asynchronous and called in an `useEffect()` hook, it must be unsubscribed and cleaned up in the returned cleanup function. You should use Observable to handle this.

All repositories must extend the base Repository class.

#### Service

Service is the business layer. It is just a class whose methods are custom hooks or pure functions to handle logic of a specific domain.

All custom hooks and custom hook calls should respect the Single-Purpose principle. Each service should handle logic for only one domain. Each method should handle only one specific logic of its domain.

#### View

View is the presentation layer. (It's called `view` on Web and `screen` on Mobile app).

A view should be a component which contains only JSX and service calls to render.


#### Model

Model is the name of all objects in the app:
- Data access object
- Data transfer object
- Business object

Because Javascript is a dynamic language. It does not require all fields of an object to explicitly have a value. All fields can be safely defined in the class. The property's values of their instances will be assigned in the data access layer where they are defined.

#### Internationalization

react3l use `i18next` and `react-i18next` packages for internationalization. We provide a CLI package [i18next-extractor](https://github.com/react3l/i18next-extractor#readme) for managing the translation resources

- Define the languages
- Extracting the language keys
- Merging the translated files (JSON format)
npm package: @react4tv/react-safe-component
Description: Wrap React Component class, restrict visibility by mount state
Author: Nguyễn Sỹ Thành Công
Latest version: 1.0.0

# React SafeComponent


Wrap React Component class, restrict visibility by mount state



## Installation

Using npm:

```
npm install --save @react4tv/react-safe-component
```

or using yarn:

```
yarn add @react4tv/react-safe-component
```

## Usage

Gets the application instance ID.

#### Examples

```typescript
import { SafeComponent } from '@react4tv/react-safe-component';

class Example extends SafeComponent<{},{}>{
    _componentDidMount(){
        // Use like setState
        this.setStateSafe({})
    }
    _componentWillUnmount(){
        //...
    }
    renderContent(): React.ReactNode {
        return <div />
    }
}
```
npm package: @react4tv/react-tv-dimension
Description: Library ensures proper height, width, font ratio SmartTV Tizen, WebOS: 1920x1080
Author: Nguyễn Sỹ Thành Công
Latest version: 1.1.3

# React SmartTV Dimension


Library ensures proper height, width, font ratio SmartTV Tizen, WebOS: 1920x1080



## Installation

Using npm:

```
npm install --save @react4tv/react-tv-dimension
```

or using yarn:

```
yarn add @react4tv/react-tv-dimension
```

## Usage

Full Examples:

```javascript
import { 
    DimensionProvider, 
    withDimensionContext,
    ScaleUtil
} from '@react4tv/react-tv-dimension';

class AppContainer extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    window.addEventListener('resize', this.resizeDocument);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.resizeDocument);
  }

  private resizeDocument = () => {
    ScaleUtil.changeScaleRatio();
    this.props.dimensionContext.setAppDimension();
  };

  render(){
    const { width, height } = this.props.dimensionContext.dimension;
    return (
      <DimensionProvider>
        //...
      </DimensionProvider>
    );
  }
}

const App = withDimensionContext(AppContainer);

//Container
ReactDOM.render(<App />, "root");

```

## Example

![alt text](https://github.com/react-4-smart-tv/react-tv-dimension/blob/main/img/1.png?raw=true)


![alt text](https://github.com/react-4-smart-tv/react-tv-dimension/blob/main/img/2.png?raw=true)
npm package: @react4tv/react-tv-dimention
Description: Library ensures proper height, width, font ratio SmartTV Tizen, WebOS: 1920x1080
Author: Nguyễn Sỹ Thành Công
Latest version: 1.0.1

# React SmartTV Dimention


Library ensures proper height, width, font ratio SmartTV Tizen, WebOS: 1920x1080



## Installation

Using npm:

```
npm install --save @react4tv/react-tv-dimention
```

or using yarn:

```
yarn add @react4tv/react-tv-dimention
```

## Usage

Full Examples:

```javascript
import { 
    DimentionProvider, 
    withDimentionContext,
    ScaleUtil
} from '@react4tv/react-tv-dimention';

class AppContainer extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    window.addEventListener('resize', this.resizeDocument);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.resizeDocument);
  }

  private resizeDocument = () => {
    ScaleUtil.changeScaleRatio();
    this.props.dimentionContext.setAppDimention();
  };

  render(){
    const { width, height } = this.props.dimentionContext.dimention;
    return (
      <DimentionProvider>
        //...
      </DimentionProvider>
    );
  }
}

const App = withDimentionContext(AppContainer);

//Container
ReactDOM.render(<App />, "root");

```
npm package: @react4tv/react-tv-fast-image
Description: React4 SmartTV library best performant React image component, includes many utilities
Author: Nguyễn Sỹ Thành Công
Latest version: 0.1.0

# @react4tv/react-tv-fast-image



React4 SmartTV library best performant React image component, includes many utilities



Most of the browser's Image, <img/> element handles image caching by default. Even a lot of people have noticed:

- Caching is not controlled.
- Show partial images.
- Low performance when loading many images.
- Affects the main thread.
- Loading 1 image queue if it fails, it will lead to the error of the rest of the images

`SmartTVImage` is an `Image` replacement that solves these issues. `SmartTVImage` using `WebWorker` 

## Features

-  [x] Using worker.
-  [x] Manager cache images.
-  [x] Preload images.
-  [x] Placeholder.

## Installation

Using npm:

```
npm install --save @react4tv/react-tv-fast-image
```

or using yarn:

```
yarn add @react4tv/react-tv-fast-image
```
npm package: @react4tv/smart-tv-hot-update
Description: HotUpdate Code SDK for SmartTV (use WebApp)
Author: Nguyễn Sỹ Thành Công
Latest version: 1.0.3

@react4tv/smart-tv-platform / [Modules](markdown/modules.md)

# IframeSdk

Library support hotupdate for SmartTV platform.

## Installation

Using npm:

```
npm install --save ...
```

or using yarn:

```
yarn add ...
```

## Usage

### Classes

- [SDKHotUpdate](markdown/classes/manager_manager.SDKHotUpdate.md)

### Interfaces

- [IConfig](markdown/interfaces/manager_manager.IConfig.md)
- [ISDKHotUpdate](markdown/interfaces/manager_manager.ISDKHotUpdate.md)

#### Examples

```javascript
window.onload = function () {
  if (window.SDKHotUpdateIframe) {
    window.SDKHotUpdateIframe.getInstance({
      debug: true,
      loadAppTimeOut: 10000,
    });
  }
};
```

## Release Notes

<!-- After generate delete path markdown/ in file markdown  -->
npm package: @react4tv/tdm-ads-manager
Description: Thudo Multimedia Ads SmartTV
Author: Nguyễn Sỹ Thành Công
Latest version: 0.0.6

# tdm-ads-manager
The library provides a solution TDM Ads Manager Event for Smart TV
ThudoMultimedia

-----Thành Công DEV-----
thanhcongns94@gmail.com
npm package: @react5/bundle-sass
Description: A rollup plugin to bundle sass, scss, css files and apply postcss processing.
Author: react5
Latest version: 0.5.9

# bundle-sass
A rollup plugin to bundle Sass, SCSS, and CSS files and apply PostCSS processing.

## Usage in Rollup
```javascript
plugins: [
  ...
  bundleSass({
    copyFonts: true,
    postfixOptions: {
      plugins: [
        autoprefixer(), 
        production && cssnano()],
      use: ["@use 'sass:color';"]
    }
  ...
]
```