How to use preact-fela - 4 common examples

To help you get started, we’ve selected a few preact-fela examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github robinweser / fela / examples / example-preact / components / Wrapper.js View on Github external
const center = props => ({
  padding: 10,
  justifyContent: 'center',
  alignItems: 'center',
  textAlign: 'center',
  flexDirection: 'column',
  flex: props.flex || 1,
  fontFace: {
    fontFamily: 'Lato',
    src: [
      'https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff'
    ]
  }
})

export default createComponent(center)
github robinweser / fela / examples / example-preact / components / Text.js View on Github external
import { createComponent } from 'preact-fela'

const info = () => ({
  padding: 5,
  fontSize: '20px',
  color: 'gray',
  flexDirection: 'column'
})

export default createComponent(info)
github robinweser / fela / examples / example-preact / components / Header.js View on Github external
color: 'rgb(50, 50, 50)',
  fontSize: 100,
  padding: 50,
  ':hover': { animationDuration: '500ms' },
  '@media (max-width: 800px)': { fontSize: '40px' },
  animationDuration: '2s',
  animationIterationCount: 'infinite',
  animationName: {
    '0%': { color: 'green' },
    '50%': { color: 'blue' },
    '80%': { color: 'purple' },
    '100%': { color: 'green' }
  }
})

export default createComponent(rule, Header, ['title'])
github robinweser / fela / examples / example-preact / components / Label.js View on Github external
import { createComponent } from 'preact-fela'

const label = props => ({
  fontSize: props.size,
  lineHeight: '200px',
  padding: 20
})

export default createComponent(label)

preact-fela

Preact bindings for Fela

MIT
Latest version published 2 years ago

Package Health Score

70 / 100
Full package analysis

Popular preact-fela functions