open-index/open-npm huggingface dataset:
npm package: @oubli/react-background-image
Description: React Background Image Component for npm package
Author: Oubli Corp
Latest version: 1.0.4

# React Background Image

React Background Image is a library designed to facilitate the adaptation of 
any image to its parent container, always showing as much as possible
of the image, without creating deformations according to the format of the image.

The image is readapted when the screen is resized, so it is valid for 
any screen size.

## How to Install

```$xslt
npm install @oubli/react-background-image --save
```

## Usage
The use is really simple, just import the library
and pass as property the url of the resource and its alt tag, to improve
accessibility.

```javascript
import React from 'react';
import BackgroundImage from '@oubli/react-background-image'

export default () => <BackgroundImage url={"YOUR_PICTURE_URL"} alt={"YOUR_CUSTOM_ALT"}
```

# Props
| Name          | Default       | Description  |
| ------------- |:-------------:| ------------:|
| url           | null          | The url of the resource you want to load |
| alt           | "BackgroundImage"      | Alternative text to the image for correct accessibility |
| backgroundSize| "Cover"       | You can select two modes of background image behavior that work the same as css, cover or contain |

## Tips 
The parent container should have a defined height and width, if this is not likely to cause problems.
npm package: @oubli/react-sidebar
Description: React Sidebar for Oubli npm package
Author: Juanan Rodríguez
Latest version: 0.0.3

### Languages
* [ESP](./README_ES.md)
* [ING](./README.md)

# React Sidebar
React Sidebar is a component ready to work as a side sidebar (in future versions also horizontal) 
that includes the possibility of displacement from the right or from the left.

It is still under development, but is fully functional for basic projects.

The opening state of the component must be controlled from outside. 

## How to Install

```$xslt
npm install @oubli/react-sidebar --save
```

## Usage
The use is really simple, just import the library
and include inside the component the elements that you want to show inside.

```javascript
import React from 'react';
import Sidebar from '@oubli/react-sidebar'

const Example = (props) => (
<Sidebar
    position={'right'}
    open={true}
>
    <section>
        <p>The inside</p>
    </section>
</Sidebar>
)
```

# Props
| Name          | Default       | Description  |
| ------------- |:-------------:| ------------:|
| position           | 'left'          |  |
| open           | false      |  |

## Tips 
It only accepts one react element inside, 
so if you want to render more, it must be wrapped in a label.
npm package: @ouc/eslint-config
Description: OUC eslint config
Latest version: 10.0.3

# @ouc/eslint-config

This is the ESLint config of @OUC

## Dependencies

This config is based on [eslint-config-airbnb-typescript](https://github.com/iamturns/eslint-config-airbnb-typescript).

## Installing it

In your new project, do:

```bash
npm i --save-dev    @ouc/eslint-config \
                    @typescript-eslint/eslint-plugin@7 \
                    @typescript-eslint/parser@7 \
                    @commitlint/cli@19 \
                    @commitlint/config-conventional@19 \
                    husky@9 \
                    eslint@8 \
                    eslint-config-airbnb@19 \
                    eslint-config-airbnb-typescript@18 \
                    eslint-config-async@2 \
                    eslint-config-prettier@9 \
                    eslint-import-resolver-typescript@3 \
                    eslint-plugin-es5@1 \
                    eslint-plugin-es-x@8 \
                    eslint-plugin-import@2 \
                    eslint-plugin-ie11@1 \
                    eslint-plugin-jsx-a11y@6 \
                    eslint-plugin-prettier@5 \
                    eslint-plugin-react@7 \
                    eslint-plugin-react-hooks@4 \
                    prettier@3 \
                    scriptlint@3 \
                    typescript@5 \
                    npm-run-all@4
```

Create the following files in your new project:

### .eslintrc.js

```js
module.exports = {
  extends: ["@ouc/eslint-config"],
  parserOptions: {
    project: "./tsconfig.eslint.json",
  },
};
```

### .eslintignore

```bash
node_modules
dist
volumes
# and whatever else you might want to exclude that has JS/TS files inside
```

### .prettierrc.js

```js
const config = require("@ouc/eslint-config/.prettierrc");

module.exports = config;
```

### .scriptlintrc.js

```js
const config = require("@ouc/eslint-config/.scriptlintrc");

module.exports = config;
```

### commitlint.config.js

```js
const config = require("@ouc/eslint-config/commitlint.config");

module.exports = config;
```

### tsconfig.eslint.json

```json
{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            // make sure to include all the paths here that you also specified in your default tsconfig.json!
        }
    },
    "exclude": [
        "node_modules",
    ],
    "include": [
        ".eslintrc.js",
        "*.js",
        "*.ts",
        "**/*.js",
        "**/*.ts",
    ]
}
```

## Using it

Create the tasks in your package.json, e.g.

```json
{
    "scripts": {
        "lint": "run-p lint:scriptlint lint:eslint",
        "lint:commitlint": "commitlint --edit",
        "lint:eslint": "eslint --ext .js,.ts .",
        "lint:eslint:fix": "eslint --ext .js,.ts . --fix",
        "lint:scriptlint": "scriptlint"
    },
}
```

and create the following husky scripts:

```bash
npx husky-init

cp node_modules/@ouc/eslint-config/.husky/commit-msg .husky/commit-msg
cp node_modules/@ouc/eslint-config/.husky/pre-commit .husky/pre-commit
cp node_modules/@ouc/eslint-config/.husky/pre-push .husky/pre-push
chmod +x .husky/commit-msg .husky/pre-commit .husky/pre-push
```

and start using it :)