apeman-react-style

apeman react package for style component.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
apeman-react-style
4.1.78 years ago9 years agoMinified + gzip package size for apeman-react-style in KB

Readme

apeman-react-style


!Build Statusbdtravisshieldurlbdtravisurl !Code Climatebdcodeclimateshieldurlbdcodeclimateurl !Code Coveragebdcodeclimatecoverageshieldurlbdcodeclimateurl !npm Versionbdnpmshieldurlbdnpmurl !JS Standardbdstandardshieldurlbdstandardurl


apeman react package for style component.





Installation

$ npm install apeman-react-style --save



Usage

Convert react inline style attribute into style tag.
'use strict'

import React from 'react'
import {ApStyle} from 'apeman-react-style'

const ExampleComponent = React.createClass({
  render () {
    let style01 = {
      'my-component-01 button': {
        backgroundColor: '#FFF',
        color: '#555'
      }
    }
    let style02 = {
      'my-component-02 button': { /* ... */ }
    }
    return (
      <div>
        <ApStyle data={ style01 }/>
        <ApStyle data={ style02 }/>
      </div>
    )
  }
})

This will results,
<html>
<head>
    <style type="text/css">
        .my-component-01 button {
            background-color: #FFF;
            color: #555;
        }

        .my-component-02 button {
            /*...*/
        }
    </style>
</head>
</html>

Props

| Key | Type | Description | | --- | ---- | ------ | | data | string|object | Css string or style data. | | prefix | string | Parent selector for each styles to add. |


Components

ApStyle

Props
| Name | Type | Default | Description | | ---- | ---- | ------- | ----------- | | data | string|objectOf | null | | | | smallMediaData | string|object | null | | | | mediumMediaData | string|object | null | | | | largeMediaData | string|object | null | | | | type | string | 'text/css' | | |


License

This software is released under the MIT License.

Links