open-index/open-npm huggingface dataset:
npm package: @sj-distributor/eslint-plugin-react
Description: ESLint presets for react
Latest version: 0.7.1

# 👨‍💻 @sj-distributor/eslint-plugin-react

[![Npm Version](https://img.shields.io/npm/v/npm.svg)](https://www.npmjs.com/package/@sj-distributor/eslint-plugin-react)
[![MIT License](https://img.shields.io/npm/l/react-native-tab-view.svg?style=flat-square)](https://www.npmjs.com/package/@sj-distributor/eslint-plugin-react)
[![downloads](https://img.shields.io/npm/dm/eslint-config-standard.svg)](https://www.npmjs.com/package/@sj-distributor/eslint-plugin-react)
[![Ci](https://github.com/sj-distributor/eslint-plugin-react/actions/workflows/ci.yml/badge.svg)](https://github.com/sj-distributor/eslint-plugin-react/actions/workflows/ci.yml)

ESLint presets for react

### [中文文档](https://github.com/sj-distributor/eslint-plugin-react/blob/master/README-ZH.md)

## Installation

You first need to install [ESLint](https://eslint.org/) and the agreed third-party plug-in package:

```sh
yarn add eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-simple-import-sort eslint-plugin-unicorn prettier typescript
```

Next, install `@sj-distributor/eslint-plugin-react`:

```sh
yarn add @sj-distributor/eslint-plugin-react
```

## Usage

Add `eslint-plugin-react` to the extends section of your `.eslintrc` configuration file:

```json
{
  "extends": ["plugin:@sj-distributor/react/recommended"]
}
```

## What rules are used?

- [eslint](https://eslint.org/)
- [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier#readme)
- [eslint-plugin-import](https://github.com/import-js/eslint-plugin-import)
- [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier#readme)
- [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react)
- [eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks)
- [eslint-plugin-simple-import-sort](https://github.com/lydell/eslint-plugin-simple-import-sort#readme)
- [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint#readme)
- [@typescript-eslint/parser](https://github.com/typescript-eslint/typescript-eslint#readme)
- [eslint-plugin-unicorn](https://github.com/sindresorhus/eslint-plugin-unicorn#readme)
npm package: @sj-distributor/eslint-plugin-react-native
Description: ESLint presets for react native
Latest version: 0.3.0

# 👨‍💻 @sj-distributor/eslint-plugin-react-native

[![Npm Version](https://img.shields.io/npm/v/npm.svg)](https://www.npmjs.com/package/@sj-distributor/eslint-plugin-react-native)
[![MIT License](https://img.shields.io/npm/l/react-native-tab-view.svg?style=flat-square)](https://www.npmjs.com/package/@sj-distributor/eslint-plugin-react-native)
[![downloads](https://img.shields.io/npm/dm/eslint-config-standard.svg)](https://www.npmjs.com/package/@sj-distributor/eslint-plugin-react-native)
[![Ci](https://github.com/sj-distributor/eslint-plugin-react-native/actions/workflows/ci.yml/badge.svg)](https://github.com/sj-distributor/eslint-plugin-react-native/actions/workflows/ci.yml)

ESLint presets for react native

### [中文文档](https://github.com/sj-distributor/eslint-plugin-react-native/blob/master/README-ZH.md)

## Installation

You'll first need to install [ESLint](https://eslint.org/) and the agreed third-party plug-in package:

```sh
yarn add eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-simple-import-sort eslint-plugin-unicorn prettier typescript eslint-plugin-eslint-plugin --dev
```

Next, install `@sj-distributor/eslint-plugin-react-native`:

```sh
yarn add @sj-distributor/eslint-plugin-react-native --dev
```

## Usage

Add `eslint-plugin-react-native` to the extends section of your `.eslintrc` configuration file:

```json
{
  "extends": ["plugin:@sj-distributor/react-native/recommended"]
}
```

## What rules are used?

- [eslint](https://eslint.org/)
- [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier#readme)
- [eslint-plugin-eslint-plugin](https://github.com/eslint-community/eslint-plugin-eslint-plugin#readme)
- [eslint-plugin-import](https://github.com/import-js/eslint-plugin-import)
- [eslint-plugin-node](https://github.com/mysticatea/eslint-plugin-node#readme)
- [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier#readme)
- [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react)
- [eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks)
- [eslint-plugin-react-native](https://github.com/intellicode/eslint-plugin-react-native)
- [eslint-plugin-simple-import-sort](https://github.com/lydell/eslint-plugin-simple-import-sort#readme)
- [@typescript-eslint](https://typescript-eslint.io/)
- [eslint-plugin-unicorn](https://github.com/sindresorhus/eslint-plugin-unicorn)
npm package: @sj-distributor/react-native-confirm-modal
Description: A React Native Confirm Modal
Author: Simon
Latest version: 0.7.2

# :rainbow: react-native-confirm-modal

[![Npm Version](https://img.shields.io/npm/v/npm.svg)](https://www.npmjs.com/package/@sj-distributor/react-native-confirm-modal)
[![MIT License](https://img.shields.io/npm/l/react-native-tab-view.svg?style=flat-square)](https://www.npmjs.com/package/@sj-distributor/react-native-confirm-modal)
[![Preview](https://github.com/Simoon-F/react-native-confirm-modal/actions/workflows/preview.yml/badge.svg)](https://github.com/Simoon-F/react-native-confirm-modal/actions/workflows/preview.yml)
[![downloads](https://img.shields.io/npm/dm/eslint-config-standard.svg)](https://www.npmjs.com/package/@sj-distributor/eslint-plugin-react-native)

A React Native Confirm Modal

## Installation

```sh
yarn add @sj-distributor/react-native-confirm-modal
```

## Demo

<a href="https://raw.githubusercontent.com/Simoon-F/react-native-confirm-modal/master/demo/demo.gif"><img src="https://raw.githubusercontent.com/Simoon-F/react-native-confirm-modal/master/demo/demo.gif" width="360"></a>

## Usage

### [Click to see examples of use](https://github.com/sj-distributor/react-native-confirm-modal/blob/master/example/src/App.tsx)

## Contributing

While developing, you can run the [example app](https://github.com/Simoon-F/react-native-confirm-modal/blob/master/example/README.md) to test your changes.

Make sure your code passes TypeScript and ESLint. Run the following to verify:

```
yarn typescript
yarn lint
```

To fix formatting errors, run the following:

```
yarn lint --fix
```

Remember to add tests for your change if possible.

## License

MIT
npm package: @sj-distributor/react-native-gesture-password
Description: React native gesture password component
Author: Simon
Latest version: 0.1.0

# react-native-gesture-password

React native gesture password component

## Demo

<a href="https://raw.githubusercontent.com/Simoon-F/react-native-gesture-password/master/demo/demo.gif"><img src="https://raw.githubusercontent.com/Simoon-F/react-native-gesture-password/master/demo/demo.gif" width="360"></a>

## Installation

```sh
yarn add @sj-distributor/react-native-gesture-password
```

## Usage

[Click to view example](https://github.com/sj-distributor/react-native-gesture-password/blob/master/example/src/App.tsx)

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT
npm package: @sj-js/boxman
Description: boxman is javascript library to use GUI
Author: souljungkim@gmail.com
Latest version: 1.1.0

# BoxMan
## 📦
[![Build Status](https://travis-ci.org/sj-js/boxman.svg?branch=master)](https://travis-ci.org/sj-js/boxman)
[![All Download](https://img.shields.io/github/downloads/sj-js/boxman/total.svg)](https://github.com/sj-js/boxman/releases)
[![Release](https://img.shields.io/github/release/sj-js/boxman.svg)](https://github.com/sj-js/boxman/releases)
[![License](https://img.shields.io/github/license/sj-js/boxman.svg)](https://github.com/sj-js/boxman/releases)

- HTML DOM객체를 자유롭게 이동시키거나 특정 영역(Box)으로 옮길 수 있습니다.
- Drag & Drop할 수 있는 `OBJ` **Element**와 이를 담을 수 있는 `BOX` **Element**로 나뉩니다.
- ✨ Source: https://github.com/sj-js/boxman
- ✨ Document: https://sj-js.github.io/sj-js/boxman



## Getting Started
0. Load
    - Browser 
        ```html
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sj-js/boxman/dist/css/boxman.min.css">
        <script src="https://cdn.jsdelivr.net/npm/@sj-js/crossman/dist/js/crossman.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@sj-js/boxman/dist/js/boxman.min.js"></script>
        <script>
             var boxman = new BoxMan();
        </script>
        ```  
    - ES6+
        ```bash
        npm i @sj-js/boxman
        ```
        ```js
        require('@sj-js/boxman/dist/css/boxman.css');
        const BoxMan = require('@sj-js/boxman');
        const boxman = new BoxMan();
        ```
        
1. Make BOX 
    ```js
    boxman.newBox({content:'BOX', width:'100px', minHeight:'35px'});
    ```

2. Make OBJ
    ```js
    boxman.newObj({content:'OBJ', width:'50px', height:'30px'});
    ```
    
3. Simple Example
    ```html
    <!DOCTYPE html>
    <HTML>
        <head>
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sj-js/boxman/dist/css/boxman.min.css">
            <script src="https://cdn.jsdelivr.net/npm/@sj-js/crossman/dist/js/crossman.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/@sj-js/boxman/dist/js/boxman.min.js"></script>
            <script>
                var boxman = new BoxMan();
            </script>
            <style>
                div[data-box] { display:block; width:200px; min-height:30px;}
                div[data-obj] { display:inline-block; min-width:50px; min-height:30px;}
                div[data-box].test-a { background:pink; border:1px solid black; }
                div[data-obj].test-a { background:deeppink; border:1px solid black; }
            </style>
        </head>
        <body>
            Hello Boxman<br/>
        </body>
        <script>
            boxman.setTheme('default');
            boxman.newBox({content:'BOX A', class:'test-a'});
            boxman.newBox({content:'BOX B'});
            boxman.newObj({content:'A'});
            boxman.newObj({content:'B'});
            boxman.newObj({content:'C', class:'test-a'});
            boxman.newObj({content:'G', class:'test-a'});
        </script>
    </HTML>
    ```
npm package: @sj-js/fixman
Description: fix something
Author: souljungkim@gmail.com
Latest version: 1.1.0

# FixMan
## 📌
[![Build Status](https://travis-ci.org/sj-js/fixman.svg?branch=master)](https://travis-ci.org/sj-js/fixman)
[![All Download](https://img.shields.io/github/downloads/sj-js/fixman/total.svg)](https://github.com/sj-js/fixman/releases)
[![Release](https://img.shields.io/github/release/sj-js/fixman.svg)](https://github.com/sj-js/fixman/releases)
[![License](https://img.shields.io/github/license/sj-js/fixman.svg)](https://github.com/sj-js/fixman/releases)

- Causes the Element to be dragged around the screen without being obscured by scrolling
- ✨ Source: https://github.com/sj-js/fixman
- ✨ Document: https://sj-js.github.io/sj-js/fixman
    
        

## 1. Getting Started

0. Load
    - Browser
        ```html
        <script src="https://cdn.jsdelivr.net/npm/@sj-js/crossman/dist/js/crossman.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@sj-js/fixman/dist/js/fixman.min.js"></script>
        <script>
             var fixman = new FixMan();
        </script>
        ```  
    - ES6+
        ```bash
        npm i @sj-js/fixman
        ```
        ```js
        const FixMan = require('@sj-js/fixman');
        const fixman = new FixMan();
        ```
   
1. Set `data-fixed` to target element   
   ```html
   <div data-fixed>Hello</div>
   ```
   
2. Run `detect()` then, When Page is Loaded, detect and apply elements with a `data-fixed` attribute    
   ```js
   fixman.detect();
   ```

3. Simple Example
    ```html
    <!DOCTYPE html>
    <HTML>
        <head>
            <script src="https://cdn.jsdelivr.net/npm/@sj-js/crossman/dist/js/crossman.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/@sj-js/fixman/dist/js/fixman.min.js"></script>
            <script>
                var fixman = new FixMan();
            </script>
            <script>
                fixman.detect();
            </script>
        </head>
    
        <style>
            .test1 { display:block; height:50px; border:2px solid black; margin-bottom:200px; }
        </style>
    
        <body>
            <div class="test1">Please scroll down.</div>
            <div class="test1" style="width:500px; background:#FFFFFF;" data-fixed>
                <span style="font-size:30px">안녕?</span>
                <input type="text" value="Some Text">
                <button onclick="alert('Testing');">🔎</button>
                <button onclick="window.scrollTo({top:0, behavior:'smooth'});">🔝</button>
            </div>
            <div class="test1" style="width:250px; background:pink;">Hello?</div>
            <div class="test1" style="width:200px; background:skyblue;">Annyeong?</div>
            <div class="test1" style="width:300px; background:gold;">Konnichiwa? and Nihao? or Hola?</div>
            <div class="test1" style="width:500px; background:forestgreen;">How are you?</div>
            <div class="test1" style="width:800px; background:chocolate;">Como esta?</div>
        </body>
    </HTML>
    ```
npm package: @sj-js/jelly
Description: jelly jelly jelly
Author: souljungkim@gmail.com
Latest version: 0.0.2

# Jelly
## 🥝 [👨🏻‍💻⛔] Not yet implemented...  
[![Build Status](https://travis-ci.org/sj-js/jelly.svg?branch=master)](https://travis-ci.org/sj-js/jelly)
[![Coverage Status](https://coveralls.io/repos/github/sj-js/jelly/badge.svg)](https://coveralls.io/github/sj-js/jelly)
[![All Download](https://img.shields.io/github/downloads/sj-js/jelly/total.svg)](https://github.com/sj-js/jelly/releases)
[![Release](https://img.shields.io/github/release/sj-js/jelly.svg)](https://github.com/sj-js/jelly/releases)
[![License](https://img.shields.io/github/license/sj-js/jelly.svg)](https://github.com/sj-js/jelly/releases)

Jelly is simple icon and shortcut key and easy to runner system

- Icon 생성/관리/실행 WebPage에 당신만의 Menu를 쉽게 구성할 수 있습니다.
- 단축키/음성인식/Timer/Plugin
- ✨ Source: https://github.com/sj-js/jelly
- ✨ Document: https://sj-js.github.io/sj-js/jelly
- Developing.. Testing..
npm package: @sj-js/popman
Description: popman
Author: souljungkim@gmail.com
Latest version: 1.1.0

# PopMan
## 💬
[![Build Status](https://travis-ci.org/sj-js/popman.svg?branch=master)](https://travis-ci.org/sj-js/popman)
[![All Download](https://img.shields.io/github/downloads/sj-js/popman/total.svg)](https://github.com/sj-js/popman/releases)
[![Release](https://img.shields.io/github/release/sj-js/popman.svg)](https://github.com/sj-js/popman/releases)
[![License](https://img.shields.io/github/license/sj-js/popman.svg)](https://github.com/sj-js/popman/releases)
    
- 새 창(window)을 띄우지 않고 특정정보를 부각시킬 수 있습니다.
- ✨ Source: https://github.com/sj-js/popman
- ✨ Document: https://sj-js.github.io/sj-js/popman



## Getting Started

0. Load
    - Browser
        ```html    
        <script src="https://cdn.jsdelivr.net/npm/@sj-js/crossman/dist/js/crossman.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@sj-js/popman/dist/js/popman.min.js"></script>
        <script>
             var popman = new PopMan();
        </script>
        ```
    - ES6+
        ```bash
        npm i @sj-js/popman
        ```
        ```js
        const PopMan = require('@sj-js/popman');
        const popman = new PopMan();
        ```
      
1. `popman.new({OPTIONS})`로 POP Element를 등록합니다.
    ```js
    popman.new({
        id:'pop-test', //Pop Element ID
        exp:'50%/90%', //Width and Height
        content: 'This is contents.' 
    });
    ```
   
2. `popman.pop('Element ID')`로 POP Element를 호출합니다.
    ```js
    popman.pop('pop-test');
    ```
      
3. Simple Example
    ```html
    <!DOCTYPE html>
    <HTML>
        <head>
            <script src="https://cdn.jsdelivr.net/npm/@sj-js/crossman/dist/js/crossman.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/@sj-js/popman/dist/js/popman.min.js"></script>
            <script>
                var popman = new PopMan();
            </script>            
        </head>
        <body>        
            Hello Popman
            <button onclick="popman.pop('pop-test');">POP</button>
            <div id="tester">TEST</div>
        </body> 
        <script>
            popman.setup({modeTest:true});
            popman.new({
                id:'pop-test',
                exp:'50%/90%',
                closebyesc:true,
                content: 'This is contents. <br/><br/>', 
                add:function(data){               
                    document.getElementById('tester').innerHTML = 'When add';
                },
                pop:function(data){
                    document.getElementById('tester').innerHTML = 'When pop';
                },
                close:function(data){
                    document.getElementById('tester').innerHTML = 'When close';
                }
            });
        </script>
    </HTML>
    ```