open-index/open-npm huggingface dataset:
npm package: @shrivastava/usestatus
Description: useOnlineStatus is a custom React hook that monitors the user's internet connection status in real-time.
Author: Prince Shrivastava
Latest version: 1.0.2

# `useOnlineStatus`

A simple and effective React hook to detect the online💚/offline❤️ status of the user in real-time, with **live connection indicators**

## 🚀 Installation

You can easily install `useOnlineStatus` using npm or yarn. Here's how to get started:

### With npm:
    npm install @shrivastava/usestatus

## 💡 Usage
Once installed, you can start using the useOnlineStatus hook in your React components. The hook returns a boolean value indicating whether the user is online or offline, which is visually represented by colorful emojis.

  Example:
               
      import React from 'react'; 
      import useStatus from '@shrivastava/usestatus';
      
      const App = () => {
        const isOnline = useStatus();
      
        return (
          <div style={{ padding: '20px', textAlign: 'center' }}>
          
            <h1 style={{ fontSize: '2em' }}>
              {isOnline ? ( <>🟢 You are online 💚</> ) : <> 🔴 You are offline ❤️ </> )}
            </h1>
          </div>
        );
      };
      
      export default App;


### 🎨 Features

- **Real-Time Monitoring**: The hook automatically updates the status whenever the user's network changes (online/offline).
- **Live Connection Indicators**: Emojis 💚❤️ give a visual cue to users based on their network status.
- **Easy to Use**: Just import and call the hook in your component. No additional setup is required.

### ⚡ Benefits
- **Seamless App Behavior**: Adjust app features dynamically based on the network status.
- **Small Footprint**: The hook is highly efficient and doesn't add unnecessary bloat to your project.

### 🔗 Links

- **GitHub Repository**: [https://github.com/shrivastava-26/useonlinestatus](https://github.com/shrivastava-26/useonlinestatus)
- **npm Package**: `@shrivastava/usestatus`

### 📄 License
MIT License. Feel free to contribute or use the package in your projects.
npm package: @shriyans/ppx_bs_css
Description: CSS syntax extension for BuckleScript/ReasonML
Latest version: 0.0.5

ppx\_bs\_css
============

A ppx rewriter for CSS expressions.

Parses a CSS string and produces a declaration block compatible with
[bs-css](https://github.com/SentiaAnalytics/bs-css), and
[typed-css-core](https://github.com/glennsl/bs-typed-css/tree/master/packages/core).

### Quick start

```
yarn add -D @shriyans/ppx_bs_css
```

or 

```
npm i -D @shriyans/ppx_bs_css
```

### Usage

Add the PPX to your `bsconfig.json`:

```json
{
    "ppx-flags": [
        "@shriyans/ppx_bs_css/ppx"
    ]
}
```

### Examples

Basic `bs-css` rules (ReasonML syntax):

```reason
/* rules has type list(Css.rule) */
let rules =
  let open Css;
  [%style
    {|
      color: red;
      background-color: white;
      margin: auto 0 10px 1em;
      border-bottom: thin dashed #eee;
      border-right-color: rgb(1, 0, 1);
      width: 70%;
      background: url(http://example.com/test.jpg)
    |}
  ];
```

`bs-css` rules with selectors (ReasonML syntax):

```reason
/* rules has type list(Css.rule) */
let css =
  let open Css;
  [%css
    {|
      {
        color: red;
      }

      :hover {
        color: blue;
      }
    |}
  ];
```

`bs-css` keyframes (ReasonML syntax):

```reason
let bounces =
  let open Css;
  [%style
    {|
      @keyframes {
        from { transform: scale(0.1, 0.1); opacity: 0.0; }
        60% { transform: scale(1.2, 1.2); opacity: 1.0; }
        to { transform: scale(1.0, 1.0); opacity: 1.0; }
      }
    |}
  ];
let bounce = List.hd(bounces);
let stylesWithAnimation =
  let open Css;
  [%style
    {|
      animation-name: bounce;
      animation-duration: 2000;
      width: 50px;
      height: 50px;
      background-color: rgb(255, 0, 0)
    |}
  ];
```

Basic `typed-glamor` declaration block (ReasonML syntax):

```reason
/* declarations has type list(TypedGlamor.Core.declaration) */
let declarations =
  let open TypedGlamor;
  [%style
    {typed|
      color: red;
      background-color: white;
      margin: auto 0 10px 1em;
      border-bottom: thin dashed #eee;
      border-right-color: rgb(1, 0, 1);
      width: 70%;
      background: url(http://example.com/test.jpg)
    |typed}
  ];
```

Selectors also work with `typed-glamor`. They need the `[%css]` extension instead of `[%style]`:

```reason
/* Selectors */
let _ = {
  let open TypedGlamor;
  [%css
    {typed|
      {
        color: red;
      }

      :hover {
        color: blue;
      }
    |typed}
  ];
};
```

See also:
[ppx_bs_css-examples](https://github.com/astrada/ppx_bs_css-examples).

### What you get

* Errors at compile time:

![Color typo](doc/color_typo.png)

* Merlin support:

![Merlin type error](doc/merlin_type_error.png)

![Merlin function info](doc/merlin_function.png)

### What you don't get

* Autocomplete

### Development

    npm install -g esy
    esy install
    esy build
    # to build tests
    esy dune build test/test_suite.exe
    # to run tests
    esy ./_esy/default/build/default/test/test_suite.exe
    # to build test_bs
    cd test_bs && yarn install
    # to run test_bs
    yarn build
npm package: @shrkw/textlint-rule-ng-word
Description: textlint rule that check NG words
Author: shrkw
Latest version: 1.1.0

This project is forked cause the original project author terminated the maintenance.

# textlint-rule-ng-word
[textlint](https://github.com/textlint/textlint) rule that check NG word.

## Installation

```
npm install @shrkw/textlint-rule-ng-word
```

## Usage

```
npm install -g textlint @shrkw/textlint-rule-ng-word
textlint --rule ng-word README.md
```

## Config

```
{
  "rules": {
    "ng-word": {
      "words": ["word1", "word2"]
    }
  }
}
```

## Tests

```
npm test
```

## License
MIT