open-index/open-npm huggingface dataset:
npm package: @mll-lab/eslint-config
Description: The shareable eslint configuration of MLL
Author: Benedikt Franke
Latest version: 3.4.1

# eslint-config

The shareable eslint configuration of MLL

## Installation

```shell
yarn add --dev @mll-lab/eslint-config
```

## Configuration

Extend this configuration in your ESLint config:

```json
  "extends": [
    "@mll-lab/eslint-config"
  ],
```

## React

Add required peer dependencies:

```shell
yarn add --dev eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y
```

Then add an extra entry to your ESLint config.
Make sure to place it config before the base config.

```json
  "extends": [
    "@mll-lab/eslint-config/react",
    "@mll-lab/eslint-config"
  ],
```
npm package: @mll-lab/eslint-plugin
Description: ESLint plugin and common configuration of MLL
Author: Benedikt Franke
Latest version: 1.6.0

# eslint-plugin

ESLint plugin and common configuration of MLL

## Installation

```shell
yarn add --dev @mll-lab/eslint-plugin
```

## Configuration

Extend your ESLint configuration file:

```js
  "extends": [
    "plugin:@mll-lab/recommended",  
  ],
```
npm package: @mll-lab/js-utils
Description: Shared JavaScript utilities of MLL
Author: Benedikt Franke
Latest version: 2.41.1

# @mll-lab/js-utils

[![npm](https://img.shields.io/npm/v/@mll-lab/js-utils)](https://www.npmjs.com/package/@mll-lab/js-utils)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

Shared JavaScript utilities of MLL

## Install

    yarn add @mll-lab/js-utils

## Usage

Just import the functions you need and call them, for example:

```ts
import { isLabID } from '@mll-lab/js-utils';

isLabID('obviously not');
```
npm package: @mll-lab/prettier-config
Description: The shareable prettier configuration of MLL
Author: Benedikt Franke
Latest version: 1.0.0

# prettier-config

The shareable prettier configuration of MLL

## Installation

    yarn add --dev @mll-lab/prettier-config

## Usage

```js
// .prettierrc.js
module.exports = require('@mll-lab/prettier-config');

// For customization
module.exports = {
    ...require('@mll-lab/prettier-config'),
    ...
};
```
npm package: @mll-lab/react-components
Description: Shared React components of MLL
Author: Benedikt Franke
Latest version: 20.4.1

# @mll-lab/react-components

[![npm](https://img.shields.io/npm/v/@mll-lab/react-components)](https://www.npmjs.com/package/@mll-lab/react-components)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

Shared React components of MLL

[Try it out](https://mll-lab.github.io/react-components)

## Install

    yarn add @mll-lab/react-components

## Usage

To set up proper styles, wrap your application in `<Provider>`:

```tsx
import { Provider } from '@mll-lab/react-components';
import * as React from 'react';
import { render } from 'react-dom';

render(
    <Provider>
        <App />
    </Provider>,
    document.getElementById('app'),
);
```

Optionally, you may pass a theme:

```tsx
<Provider theme={{ backgroundColor: 'purple' }}>
```
npm package: @mll-lab/tsconfig
Description: The shareable TypeScript configuration of MLL
Author: Benedikt Franke
Latest version: 3.1.0

# tsconfig

The shareable TypeScript configuration of MLL

## Installation

    yarn add --dev @mll-lab/tsconfig

## Usage

```json
// tsconfig.json
{
  "extends": "@mll-lab/tsconfig",
  ...
}
```
npm package: @mllrsohn/preact-render-to-string
Description: Render JSX to an HTML string, with support for Preact components.
Author: Jason Miller
Latest version: 5.0.6

# preact-render-to-string

[![NPM](http://img.shields.io/npm/v/preact-render-to-string.svg)](https://www.npmjs.com/package/preact-render-to-string)
[![travis-ci](https://travis-ci.org/developit/preact-render-to-string.svg)](https://travis-ci.org/developit/preact-render-to-string)

Render JSX and [Preact] components to an HTML string.

Works in Node & the browser, making it useful for universal/isomorphic rendering.

\>\> **[Cute Fox-Related Demo](http://codepen.io/developit/pen/dYZqjE?editors=001)** _(@ CodePen)_ <<


---


### Render JSX/VDOM to HTML

```js
import render from 'preact-render-to-string';
import { h } from 'preact';
/** @jsx h */

let vdom = <div class="foo">content</div>;

let html = render(vdom);
console.log(html);
// <div class="foo">content</div>
```


### Render Preact Components to HTML

```js
import render from 'preact-render-to-string';
import { h, Component } from 'preact';
/** @jsx h */

// Classical components work
class Fox extends Component {
	render({ name }) {
		return <span class="fox">{ name }</span>;
	}
}

// ... and so do pure functional components:
const Box = ({ type, children }) => (
	<div class={`box box-${type}`}>{ children }</div>
);

let html = render(
	<Box type="open">
		<Fox name="Finn" />
	</Box>
);

console.log(html);
// <div class="box box-open"><span class="fox">Finn</span></div>
```


---


### Render JSX / Preact / Whatever via Express!

```js
import express from 'express';
import { h } from 'preact';
import render from 'preact-render-to-string';
/** @jsx h */

// silly example component:
const Fox = ({ name }) => (
	<div class="fox">
		<h5>{ name }</h5>
		<p>This page is all about {name}.</p>
	</div>
);

// basic HTTP server via express:
const app = express();
app.listen(8080);

// on each request, render and return a component:
app.get('/:fox', (req, res) => {
	let html = render(<Fox name={req.params.fox} />);
	// send it back wrapped up as an HTML5 document:
	res.send(`<!DOCTYPE html><html><body>${html}</body></html>`);
});
```


---


### License

[MIT]


[Preact]: https://github.com/developit/preact
[MIT]: http://choosealicense.com/licenses/mit/