Repozytorium Web Developera

Archiwum z lat 2013-2018, treści mogą być nieaktualne.

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)