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.
@cerebral/react
Advanced tools
React view for Cerebral.
npm install @cerebral/react react react-dom babel-preset-react
import React from 'react'
import { render } from 'react-dom'
import App from 'cerebral'
import { Container } from '@cerebral/react'
import AppComponent from './components/App'
import main from './main'
const app = App(main)
render(
<Container app={app}>
<AppComponent />
</Container>,
document.querySelector('#app')
)
Typically you add a stateless component:
import React from 'react'
import { state, sequences } from 'cerebral'
import { connect } from '@cerebral/react'
export default connect(
{
foo: state`foo`,
onClick: sequences`onClick`
},
function MyComponent({ foo, onClick }) {
return <div onClick={() => onClick()}>{foo}</div>
}
)
But you can also use stateful components:
import React from 'react'
import { state, sequences } from 'cerebral'
import { connect } from '@cerebral/react'
export default connect(
{
foo: state`foo`,
onClick: sequences`onClick`
},
class MyComponent extends React.Component {
render() {
return <div onClick={() => this.props.onClick()}>{this.props.foo}</div>
}
}
)
You do not have to define dependencies right away, you can rather dynamically grab them from inside the component. This is a preference thing:
import React from 'react'
import { state, sequences } from 'cerebral'
import { connect } from '@cerebral/react'
export default connect(
function MyComponent({ get }) {
const foo = get(state`foo`)
const onClick = get(sequences`onClick`)
return <div onClick={() => onClick()}>{foo}</div>
}
)
You can add an additional function to connect that gives you full control of properties of the component and dependencies. The returned object from this function will be the exact props passed into the component.
import React from 'react'
import { sequences, state } from 'cerebral'
import { connect } from '@cerebral/react'
export default connect(
{
foo: state`app.foo`,
onClick: sequences`app.onClick`
},
({ foo, onClick }, ownProps, get) => {
return {
// values from state could be transformed here
foo: `Label: ${foo}`,
// sequence calls could be bound here, so component uses it as general callback
onClick: (e) => onClick({ id: ownProps.id })
}
},
function App({ foo, onClick }) {
return <div onClick={onClick}>{foo}</div>
}
)
dependencyProps are the props you connected.
ownProps are the props passed into the component by the parent.
get allows you to resolve computed etc., just like get in actions.
If you use TypeScript, you can type your component props with connect. Read the advanced section on how to do this.
FAQs
React view for Cerebral
We found that @cerebral/react demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 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.