Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
react-fela
Advanced tools
Official React bindings for Fela.
npm i --save react-fela
The package is also available on npmcdn for those not using npm.
You need to include React and Fela on your own as well.
<!-- Development build (with warnings) -->
<script src="https://npmcdn.com/react-fela@1.0.0/dist/react-fela.js"></script>
<!-- Production build (minified) -->
<script src="https://npmcdn.com/react-fela@1.0.0/dist/react-fela.min.js"></script>
<Provider renderer>
Renderer<renderer>
The <Provider>
component should wrap your whole application. It only accepts a single prop which is your Fela Renderer.
It uses React's context to pass down the Renderer's render function. It actually is all you need to fully use Fela within your React application.
import { Provider } from 'react-fela'
import { render } from 'react-dom'
import React from 'react'
const renderer = new Renderer(mountNode, { /* config */})
render(
<Provider renderer={renderer}>
<App />
</Provider>,
document.getElementById('app')
)
Your components can now directly use the render function as fela
.
import React, { PropTypes } from 'react'
// You may also use stateful class Components
// and call fela from this.context
const App = (props, { fela }) => {
const className = fela(selector, { color: 'blue' })
return (
<div className={className}>
I am blue. (Da ba dee da ba di)
</div>
)
}
App.contextTypes = { fela: PropTypes.func }
export default App
const selector = props => ({
fontSize: '12px',
fontWeight: 300,
color: props.color,
padding: '10px'
})
I have found that there are some recurring patterns on how to actually render your selectors and keyframes. To simplify those, this package provides two HoCs (Higher-order Components).
They only help to write clean and readable code. You do not have to use them nor do they ship any new feature you could not accomplish without.
bindPropsToFela(mapper)
Function?<mapper>
Used to automatically bind the component's props to the render function. This especially fits well if you follow the pattern of presentational and container components as the props passed to your component basically describe how a presentational component looks like. It passes the modified render function via props.
Optionally pass a custom mapper to alter the shape of the props passed to Fela.
// passes the props with the exact same keys
const EnhancedApp = bindPropsToFela()(App)
const mapper = props => ({
marginTop: props.top,
fontSize: props.size
})
// uses an additional mapper to alter the shape
// e.g. Component's `top` prop is passed as `marginTop`
const EnhancedApp = bindPropsToFela(mapper)(App)
bindStateToFela(mapper)
Function?<mapper>
Similar to bindPropsToFela
but with a more dynamic nature. It binds the current component state to Fela's render function.
This is especially useful if you want to modify styles based on user input or user interaction. It adds the modified render function to the component itself (this.fela
).
You may also pass a mapper to alter the shape. It also accepts the component's props as second parameter.
It only works with stateful class components as functional components do not have state at all.
const EnhancedApp = bindStateToFela()(App)
const mapper = (state, props) => ({
fontSize: state.size,
paddingLeft: props.padding,
paddingRight: props.padding
})
const EnhancedApp = bindStateToFela(mapper)(App)
Fela is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann.
FAQs
React bindings for Fela
The npm package react-fela receives a total of 28,759 weekly downloads. As such, react-fela popularity was classified as popular.
We found that react-fela demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.