React Styled Components / React Fela
React Styled Components
TODO
React Fela
fela
i react-fela
createComponent
example
Simple:
import { createComponent } from 'react-fela'
const label = props => ({
fontSize: props.size,
lineHeight: '200px',
padding: 20
})
export default createComponent(label)
Advanced:
import React from 'react'
import { createComponent } from 'react-fela'
import colors from '../utils/colors.js'
import exampleIcon from '../images/icons/logo.svg'
export const BlankWrapper = createComponent(_ => ({
width: '100%',
display: 'inline-block'
}))
export const BlankText = createComponent(
_ => ({
width: '100%',
display: 'inline-block'
}),
'p',
['onClick']
)
connect
example
import React from 'react'
import { connect } from 'react-fela'
import colors from '../utils/colors.js'
import exampleIcon from '../images/icons/logo.svg'
const BlankComponent = ({ name, onClick, styles }) =>
<div className={styles.wrapper}>
<span className={styles.name} onClick={onClick}>{name}</span>
</div>
const wrapper = props => ({
display: 'inline-block'
})
const name = props => ({
color: colors.dark
})
export const Blank = connect({
wrapper,
name
})(BlankComponent)