open-index/open-npm huggingface dataset:
npm package: @singulio/singul
Description: The singul frontend component
Latest version: 0.1.0

<h1 align="center">

[<img src="https://shuffler.io/images/logos/singul.svg" alt="Singul Logo" width="100"/>](https://singul.io)

Singul Frontend Library

</h1>
<h4 align="center">
A Singul frontend function for app search, control and authentication.
</h4>


## Table of Contents

- [Installation](#installation)
- [Framework Integration](#framework-integration)
  - [React](#react-integration)
  - [Nextjs](#nextjs-inintegration)
  - [Vue](#vue-integration)
- [Component Properties](#component-properties)
- [Events](#events)
- [Styling Options](#styling-options)
- [Troubleshooting](#troubleshooting)

## Installation

First, install the package in your project:

```bash
npm install @singulio/singul
```

or

```bash
yarn add @singulio/singul
```

## Framework Integration

### React Integration

```jsx
import { SingulJS } from '@singulio/singul/react';

const AUTH_TOKEN = 'replace-with-your-token';
const CUSTOM_STYLES = { container: { width: '400px' } };

export default function App() {

  return (
    <section>
      <h1>Singul Search</h1>
      <SingulJS
        authToken={AUTH_TOKEN}
        placeholder="Your placeholder.."
        customStyles={CUSTOM_STYLES}
      />
    </section>
  );
}
```

### Nextjs Integration

```jsx
import { SingulJS } from '@singulio/singul/react';

const AUTH_TOKEN = 'replace-with-your-token';
const CUSTOM_STYLES = { container: { width: '400px' } };

export default function page() {

  return (
    <section>
      <h1>Singul Search</h1>
      <SingulJS
        authToken={AUTH_TOKEN}
        placeholder="Your placeholder.."
        customStyles={CUSTOM_STYLES}
      />
    </section>
  );
}
```

### Vue Integration

```vue
<template>
      <SingulJS
        authToken="dasd"
        placeholder="Search apps..."
        :customStyles="{ input: { width: '4000px' } }"
        @appSelected="handleAppSelected"
      />
</template>

<script>
import { SingulJS } from '@singulio/singul/vue';

export default {
  name: 'HelloWorld',
  props: { msg: String },
  components: { SingulJS },
  methods: {
    handleAppSelected(detail) {
      console.log('selected app', detail);
    },
  },
};
</script>
```
npm package: @sinh117801/eslint-config
Description: Sinh's ESLint config presets which also includes @sinh117801/eslint-config-standard and @sinh117801/eslint-config-typescript
Author: Sinh
Latest version: 1.0.8

# @sinh117801/eslint-config

## Usage

### Install

```bash
npm install --save-dev eslint @sinh117801/eslint-config
```

### Config `.eslintrc`

```json
{
  "extends": "@sinh117801/eslint-config"
}
```

> You don't need `.eslintignore` normally as it has been provided by the preset.

### Add script for package.json

For example:

```json
{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}
```

### Config VS Code auto fix

Install [VS Code ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and create `.vscode/settings.json`

```json
{
  "prettier.enable": false,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
```
npm package: @sinh117801/eslint-config-monorepo
Description: Sinh's ESLint config presets
Author: Sinh
Latest version: 1.0.8

# @sinh117801/eslint-config

## Usage

### Install

```bash
npm install --save-dev eslint @sinh117801/eslint-config
```

### Config `.eslintrc`

```json
{
  "extends": "@sinh"
}
```

> You don't need `.eslintignore` normally as it has been provided by the preset.

### Add script for package.json

For example:

```json
{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}
```

### Config VS Code auto fix

Install [VS Code ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and create `.vscode/settings.json`

```json
{
  "prettier.enable": false,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
```
npm package: @sinh117801/eslint-config-standard
Description: Sinh's ESLint config presets specific for JavaScript which includes ESLint for node and node security.
Author: Sinh
Latest version: 1.0.8

# @sinh117801/eslint-config

## Usage

### Install

```bash
npm install --save-dev eslint @sinh117801/eslint-config-standard
```

### Config `.eslintrc`

```json
{
  "extends": "@sinh117801/eslint-config-standard"
}
```

> You don't need `.eslintignore` normally as it has been provided by the preset.

### Add script for package.json

For example:

```json
{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}
```

### Config VS Code auto fix

Install [VS Code ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and create `.vscode/settings.json`

```json
{
  "prettier.enable": false,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
```
npm package: @sinh117801/eslint-config-typescript
Description: Sinh's ESLint config presets specific for TypeScript which also includes @sinh117801/eslint-config-standard
Author: Sinh
Latest version: 1.0.8

# @sinh117801/eslint-config

## Usage

### Install

```bash
npm install --save-dev eslint @sinh117801/eslint-config-typescript
```

### Config `.eslintrc`

```json
{
  "extends": "@sinh117801/eslint-config-typescript"
}
```

> You don't need `.eslintignore` normally as it has been provided by the preset.

### Add script for package.json

For example:

```json
{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}
```

### Config VS Code auto fix

Install [VS Code ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and create `.vscode/settings.json`

```json
{
  "prettier.enable": false,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
```