react-with-styles-interface-aphrodite
react-with-styles interface for Aphrodite
Last updated 4 years ago by lencioni .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-with-styles-interface-aphrodite 
SYNC missed versions from official npm registry.

react-with-styles-interface-aphrodite Version Badge

Build Status dependency status dev dependency status License Downloads

npm badge

Interface to use react-with-styles with Aphrodite.

Import

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

or when you need to disable !important:

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 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'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:

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:

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

whereas if you had set <DirectionProvider direction={DIRECTIONS.RTL}>, the generated css would be:

.container_kui6s4 {
  background: #fff !important;
  float: 'right' !important;
}

If you used an inline style instead:

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.

Current Tags

  • 6.0.1                                ...           latest (a year ago)

18 Versions

  • 6.0.1                                ...           a year ago
  • 6.0.0                                ...           a year ago
  • 5.0.1                                ...           2 years ago
  • 5.0.0                                ...           3 years ago
  • 4.0.2                                ...           3 years ago
  • 4.0.1                                ...           3 years ago
  • 4.0.0                                ...           3 years ago
  • 3.1.1                                ...           3 years ago
  • 3.1.0                                ...           3 years ago
  • 3.0.1                                ...           3 years ago
  • 3.0.0                                ...           3 years ago
  • 2.1.0                                ...           3 years ago
  • 2.0.1                                ...           3 years ago
  • 2.0.0                                ...           3 years ago
  • 1.2.0                                ...           4 years ago
  • 1.1.1                                ...           4 years ago
  • 1.1.0                                ...           4 years ago
  • 1.0.0                                ...           4 years ago

Copyright 2014 - 2016 © taobao.org |