open-index/open-npm huggingface dataset:
npm package: @justuno/flexui
Description: A updated UI Components for Justuno Flex
Author: riz
Latest version: 2.3.50

# flex-ui

> Made with create-react-library

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

## Install

```bash
npm install --save @bitspro/flex-ui
```

## Usage

```tsx
import React, { Component } from "react";

import MyComponent from "@justuno/flex-ui";

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

## License

MIT © [rizalishan](https://github.com/rizalishan)
npm package: @justuseit/useconstrastbg
Description: ## Just use it
Latest version: 0.1.1

# useBGContrast Hook

## Just use it

**Attention currently PoC**
\*\* Remove ClassNames/

```javascript
import useContrastBgImage from './index';

const Demo = () => {
  const ref = useContrastBgImage(() => {
    alert('you clicked outside');
  });

  return (
    <div
      ref={ref}
      className="contrast-bg"
      style={{
        width: '100%',
        height: '50vh',
        backgroundSize: 'cover',
        backgroundImage: `url(
          'https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&auto=format&fit=crop&w=2850&q=80'
        )`
      }}
    >
      <h1 className="contrast-el">Watch this</h1>
    </div>
  );
```
npm package: @justuseit/useinviewport
Description: ## Just use it how
Latest version: 0.1.1

# useOutsideClick Hook

## Just use it how

calls callback on outside Click and esc key

```javascript
import useOutsideClick from '@justuseit/useOutsideClick';

const Component = () => {
  const ref = useOutsideClick(() => {
    //.. implement your code
  });

  return (
    <div ref={ref}>
      <h1>click Outside</h1>
    </div>
  );
};
```
npm package: @justuseit/useonoffline
Description: ## Just use it
Latest version: 0.1.1

# useOnOffLine Hook

## Just use it

calls callback on outside Click and esc key

```javascript
import useOnlOffLine from '@justuseit/useOnlOffLine';

const Component = () => {
  const status = useOnlOffLine();

  return (
    <div>
      <div style={{ color: status ? '#87d068' : '#f50' }}>
        {status ? 'online' : 'offline'}
      </div>
    </div>
  );
};
```
npm package: @justuseit/useoutside
Description: ## Just use it how
Latest version: 0.1.1

# useOutsideClick Hook

## Just use it how

calls callback on outside Click and esc key

```javascript
import useOutsideClick from '@justuseit/useOutsideClick';

const Component = () => {
  const ref = useOutsideClick(() => {
    //.. implement your code
  });

  return (
    <div ref={ref}>
      <h1>click Outside</h1>
    </div>
  );
};
```
npm package: @justuseit/usetoggle
Description: Just toggles a state from false to true, defaults to false.
Latest version: 0.0.1

# useToggle Hook

Just toggles a state from false to true, defaults to false.

```javascript
import useToggle from '@justuseit/useToggle';

const Component = () => {
  const { state, onToggle } = useToggle();

  return <div>My State is {JSON.stringify(state)}</div>;
};

const Component = () => {
  const { state, onToggle } = useToggle(true);

  return <div>My State is {JSON.stringify(state)}</div>;
};
```
npm package: @justuseless/short-key-gen
Description: Creating tiny keys from stings
Author: kamesh.arumugam@gmail.com
Latest version: 0.0.9

## Short Lib function to generate tiny url keys based on string;

### How to use
```javascript
 - node src/index.js https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function
 - node src/index.js <url>space<urls>...
```

### Result
```
$ node src/index.js https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function

Short Key Code : wUsmH

```