
Product
Rubygems Ecosystem Support Now Generally Available
Socket's Rubygems ecosystem support is moving from beta to GA, featuring enhanced security scanning to detect supply chain threats beyond traditional CVEs in your Ruby dependencies.
react-sprayer
Advanced tools
CSS in JS with Style
npm install --save-dev sprayer react-sprayer react
Sprayer allows you to write modular, scoped CSS with all the features of JavaScript template strings. It is heavily influenced by CSS Modules, styled-components and CSJS.
Checkout react-sprayer-example for a full working example.
import React from 'react'
import sprayer from 'sprayer'
import { withStyle } from 'react-sprayer'
// Create a spray
const spray = sprayer`
.headline {
color: darkcyan;
font-size: ${(props) => props.fontSize}rem;
/* ^^^^^^^^^^^^^^^^^^^^^^ */
/* This interpolation will be called with the props you passed to your component */
}
`
// Create a component
const Headline = ({ classes }) => <h1 className={classes.headline}></h1>
// Connect the component with the spray
export default withStyle(spray)(Headline)
import sprayed from 'react-sprayer'
// Create a sprayed component
const ErrorMessage = sprayed.span`
.style {
color: red;
}
`
export default ErrorMessage
import React from 'react'
import sprayed, { ThemeProvider } from 'react-sprayer'
// Create a sprayed component
const Button = sprayed.button`
.style {
color: ${(_, theme) => theme.primary};
}
`
const App = () => (
<ThemeProvider theme={{ primary: 'red' }}>
<ErrorMessage />
</ThemeProvider>
)
export default App
import withStyle from 'react-sprayer'
withStyle(spray, ?mapPropsToStyle)(Component)
The withStyle function takes a spray as the first argument. You should pass a spray you created with sprayer. As second argument it takes a function which maps the props to the parameters passed to the spray as first argument. If you don't pass a second function withStyle will take all props and pass them to the spray. The withStyle function returns a function which takes a component. It passes all props and generated classes to this component and then then returns another component which you can use like any other React component.
import { classesPropTypes } from 'react-sprayer'
Headline.propTypes = {
classes: classesPropTypes
}
This is just a little helper you can use to validate the classes propType.
I would highly appreciate if you want to help me with this project. Check out the issues with the help wanted
label to see where your help is needed.
FAQs
React Helpers for Sprayer
The npm package react-sprayer receives a total of 0 weekly downloads. As such, react-sprayer popularity was classified as not popular.
We found that react-sprayer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.
Product
Socket's Rubygems ecosystem support is moving from beta to GA, featuring enhanced security scanning to detect supply chain threats beyond traditional CVEs in your Ruby dependencies.
Research
The Socket Research Team investigates a malicious npm package that appears to be an Advcash integration but triggers a reverse shell during payment success, targeting servers handling transactions.
Security Fundamentals
The Socket Threat Research Team uncovers how threat actors weaponize shell techniques across npm, PyPI, and Go ecosystems to maintain persistence and exfiltrate data.