# react-with-styles-interface-aphrodite

> react-with-styles interface for Aphrodite

Latest version **6.0.1** (published 2019-09-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-with-styles-interface-aphrodite
pnpm add react-with-styles-interface-aphrodite
yarn add react-with-styles-interface-aphrodite
bun add react-with-styles-interface-aphrodite
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 6.0.1 |
| Published | 2019-09-10 |
| First published | 2016-08-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 33.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 55 |
| Author | Joe Lencioni |
| Maintainers | airbnbeng, lencioni, majapw, milesj, noratarano |
| Keywords | react-with-styles, aphrodite |

## Links

- npm: https://www.npmjs.com/package/react-with-styles-interface-aphrodite
- Repository: https://github.com/airbnb/react-with-styles-interface-aphrodite
- Homepage: https://github.com/airbnb/react-with-styles-interface-aphrodite#readme
- Issues: https://github.com/airbnb/react-with-styles-interface-aphrodite/issues
- npm.io page: https://npm.io/package/react-with-styles-interface-aphrodite

## Dependencies (5)

- [has](https://npm.io/package/has.md) ^1.0.3
- [rtl-css-js](https://npm.io/package/rtl-css-js.md) ^1.13.1
- [object.assign](https://npm.io/package/object.assign.md) ^4.1.0
- [object.entries](https://npm.io/package/object.entries.md) ^1.1.0
- [array.prototype.flat](https://npm.io/package/array.prototype.flat.md) ^1.2.1

## Recent versions

- 6.0.1 (latest) — 2019-09-10
- 6.0.0 — 2019-09-04
- 5.0.1 — 2018-08-15
- 5.0.0 — 2018-03-16
- 4.0.2 — 2018-03-16
- 4.0.1 — 2018-02-07
- 4.0.0 — 2018-02-06
- 3.1.1 — 2017-10-09
- 3.1.0 — 2017-09-15
- 3.0.1 — 2017-09-15
- 3.0.0 — 2017-09-12
- 2.1.0 — 2017-09-05
- 2.0.1 — 2017-08-31
- 2.0.0 — 2017-08-29
- 1.2.0 — 2017-01-30
- … 3 more at https://npm.io/package/react-with-styles-interface-aphrodite/versions

## README

# react-with-styles-interface-aphrodite <sup>[![Version Badge][npm-version-svg]][package-url]</sup>

[![Build Status][travis-svg]][travis-url]
[![dependency status][deps-svg]][deps-url]
[![dev dependency status][dev-deps-svg]][dev-deps-url]
[![License][license-image]][license-url]
[![Downloads][downloads-image]][downloads-url]

[![npm badge][npm-badge-png]][package-url]

Interface to use [react-with-styles][react-with-styles] with [Aphrodite][aphrodite].

[package-url]: https://npmjs.org/package/react-with-styles-interface-aphrodite
[npm-version-svg]: http://versionbadg.es/airbnb/react-with-styles-interface-aphrodite.svg
[travis-svg]: https://travis-ci.org/airbnb/react-with-styles-interface-aphrodite.svg
[travis-url]: https://travis-ci.org/airbnb/react-with-styles-interface-aphrodite
[deps-svg]: https://david-dm.org/airbnb/react-with-styles-interface-aphrodite.svg
[deps-url]: https://david-dm.org/airbnb/react-with-styles-interface-aphrodite
[dev-deps-svg]: https://david-dm.org/airbnb/react-with-styles-interface-aphrodite/dev-status.svg
[dev-deps-url]: https://david-dm.org/airbnb/react-with-styles-interface-aphrodite#info=devDependencies
[npm-badge-png]: https://nodei.co/npm/react-with-styles-interface-aphrodite.png?downloads=true&stars=true
[license-image]: http://img.shields.io/npm/l/react-with-styles-interface-aphrodite.svg
[license-url]: LICENSE
[downloads-image]: http://img.shields.io/npm/dm/react-with-styles-interface-aphrodite.svg
[downloads-url]: http://npm-stat.com/charts.html?package=react-with-styles-interface-aphrodite

[react-with-styles]: https://github.com/airbnb/react-with-styles
[aphrodite]: https://github.com/khan/aphrodite

## Import

```js
import aphroditeInterface from 'react-with-styles-interface-aphrodite';
```

or when you need to [disable `!important`](https://github.com/Khan/aphrodite#disabling-important):

```js
import aphroditeInterface from 'react-with-styles-interface-aphrodite/no-important';
```

## Built-in RTL support

`react-with-styles-interface-aphrodite` has built-in LTR/RTL context support. Specifically, it uses [rtl-css-js](https://github.com/kentcdodds/rtl-css-js) to automatically flip styles (`margin`, `padding`, `float`, `textAlign`, etc.) that were written for an LTR page when your app is wrapped in [react-with-direction](https://github.com/airbnb/react-with-direction)'s `DirectionProvider` with direction set to `DIRECTIONS.RTL`. 

It accomplishes this by providing a directional `create` and `resolve` method. `react-with-styles` automatically uses the correct create method based on the direction value set in context and then passes down the appropriate `resolve` method as a prop named `css`.

For instance, if you were to write your styles as follows:

```jsx
import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import aphroditeInterface from 'react-with-styles-interface-aphrodite';
import { withStyles, css } from 'react-with-styles';

ThemedStyleSheet.registerInterface(aphroditeInterface);

...

function MyComponent({ css }) {
  return <div {...css(styles.container)}>Hello World</div>;
}

export default withStyles(() => ({
  container: {
    background: '#fff',
    float: 'left',
  },
}))(MyComponent);
```

The generated css for an app where you set `<DirectionProvider direction={DIRECTIONS.LTR}>` at the top would look like:

```css
.container_r5r4of {
  background: #fff !important;
  float: 'left' !important;
}
```

whereas if you had set `<DirectionProvider direction={DIRECTIONS.RTL}>`, the generated css would be:
```css
.container_kui6s4 {
  background: #fff !important;
  float: 'right' !important;
}
```

If you used an inline style instead:

```jsx
import { css } from 'react-with-styles';

export default function MyComponent() {
  return <div {...css({ background: '#fff', float: 'left' })}>Hello World</div>;
}
```

In the case where `<DirectionProvider direction={DIRECTIONS.LTR}>` is wrapping your component, this would map to a `style={{ background: '#fff', float: 'left' }}` on the div in question. If `<DirectionProvider direction={DIRECTIONS.RTL}>` is present instead, this would simply apply `style={{ background: '#fff', float: 'right' }}` to the div.

---
_Source: https://npm.io/package/react-with-styles-interface-aphrodite · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._