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.
robinweser / fela / examples / example-preact / components / Wrapper.js View on Github 
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)import { createComponent } from 'preact-fela'
const info = () => ({
padding: 5,
fontSize: '20px',
color: 'gray',
flexDirection: 'column'
})
export default createComponent(info)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'])import { createComponent } from 'preact-fela'
const label = props => ({
fontSize: props.size,
lineHeight: '200px',
padding: 20
})
export default createComponent(label)
