open-index/open-npm huggingface dataset:
npm package: @mesads/react
Description: >
Author: juxemburg
Latest version: 0.1.15

# @mesads/react

> 

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

## Install

```bash
npm install --save @mesads/react
```

## Usage

```tsx
import * as React from 'react'

import MyComponent from '@mesads/react'

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

## License

MIT © [juxemburg](https://github.com/juxemburg)
npm package: @mesaic/eslint-config-mesaic
Description: ESLint config used at mesaic. Extracted so we can use it in multiple repos.
Author: Mesaic
Latest version: 0.5.0

# eslint-config-mesaic
ESLint config used at mesaic. Extracted so we can use it in multiple repos.

Add this to your package:

```
{
  ...
  dependencies: {
    "@mesaic/eslint-config-mesaic": "^0.1.0"
  }
}

```
npm package: @mesaic/mesaic-codeformat
Description: > Autoformat code according to Mesaic JS style guidelines.
Author: Mesaic
Latest version: 3.0.0

# mesaic-autoformat
> Autoformat code according to Mesaic JS style guidelines.

Uses [prettier](https://github.com/prettier/prettier) and eslints `--fix`-feature to auto-format JS code according to our style guidelines.
npm package: @mesaic/react-atomic
Description: Atomic CSS as React components.
Author: Mesaic
Latest version: 2.0.0

# <img src="https://cloud.githubusercontent.com/assets/3755413/23356778/685a16fc-fcdb-11e6-9991-26b7c5125d2f.png" width="200">

[![License][license-image]][license-url]

> Atomic CSS inspired React components that don't bloat your DOM.


#### In
```js
  <Padding all={2}>
    <BackgroundColor color='primary'>
      <Color color='textColorOnPrimary'>
        Foo
      </Color>
    </BackgroundColor>
  </Padding>
```

#### Out
```
<div class="
  padding-left-2_3uQ
  padding-right-2_3jc
  padding-top-2_16R
  padding-bottom-2_3Fi
  background-color-accent_JJQ
  color-textColorOnPrimary-_4ij
">Foo</div>
```

## Contract
This package expects your consuming environment to be setup in a particular way.
(1) Variable names passed into `createReplacements` are expected to be available as css vars;
you should include these in your css somewhere. Example:
`createReplacements({foregroundColors: ['baseColor', 'secondaryTextColor'], backgroundColors: ['primaryColor', 'secondaryColor']})`
implies that the following css variable definitions should exist in your consumer CSS:
```
:root {
  /* arbitrary values chosen here */
  --baseColor: #333;
  --secondaryTextColor: #777;
  --primaryColor: blue;
  --secondaryColor: red;
}
```

(2) The following

## Documentation

To run that demo on your own computer:
* Clone this repository
* `npm install`
* `npm run storybook`
* Visit http://localhost:9001/

[package-url]: https://npmjs.org/package/react-atomic
[license-image]: http://img.shields.io/npm/l/react-dates.svg
[license-url]: LICENSE