https://github.com/steadicat/stylistic

A small library to convert React props into a style object.
https://github.com/steadicat/stylistic

Last synced: 2 months ago
JSON representation

A small library to convert React props into a style object.

• Host: GitHub
• URL: https://github.com/steadicat/stylistic
• Owner: steadicat
• Created: 2015-08-17T04:56:56.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-03-31T21:46:48.000Z (almost 9 years ago)
• Last Synced: 2024-11-03T10:02:50.823Z (2 months ago)
• Language: JavaScript
• Size: 21.5 KB
• Stars: 3
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Stylistic

A small library to extract style and CSS transform declarations from a React props object into a style object, with some helpful conversions along the way. See [stylistic-elements](https://github.com/steadicat/stylistic-elements) for the higher-level application of this.

For example:

```js

import {extract} from 'stylistic';

extract({

  id: 'myElement',

  onClick: onClickHandler,

  marginTop: 12,

  translateY: 24,

});

// Returns:

{

  id: 'myElement',

  onClick: onClickHandler,

  style: {

    marginTop: 12,

    transform: 'translate(0, 24px)',

  }

}

```

**Note**: this is a work-in-progress. Support for browser prefixing is coming.

## Supported CSS properties

All CSS properties should be supported. If I missed any, file a bug.

A few properties have special behaviors:

 - Colors can be provided as `[r, g, b, a]` arrays as well as standard CSS strings (this can be useful for animating).

 - `backgroundImage` takes a path/URL directly, no need to wrap it in `url()`.

 - `letterSpacing` and `lineHeight` assume pixels if you supply a number, no need to add `px`.

## Supported transform properties

 - `translateX`

 - `translateY`

 - `translateZ`

 - `scaleX`

 - `scaleY`

 - `rotateX`

 - `rotateY`

 - `rotateZ`