Gathering detailed insights and metrics for preact-with-styles
Installations
npm install preact-with-stylesDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
5.1.0
NPM Version
3.8.9
Releases
Unable to fetch releases
Contributors
27
Unable to fetch Contributors
Languages
1
JavaScript
JavaScript (100%)
validate.email 🚀
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Developer
airbnb
Download Statistics
Total Downloads
860
Last Day
1
Last Week
1
Last Month
6
Last Year
73
GitHub Statistics
MIT License
1,706 Stars
285 Commits
98 Forks
48 Watchers
86 Branches
27 Contributors
Updated on Feb 28, 2025
Bundle Size
24.89 kB
Minified
7.30 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.1.1
Package Id
preact-with-styles@1.1.1
Size
10.81 kB
NPM Version
3.8.9
Node Version
5.1.0
Published on
Mar 03, 2017
Total Downloads
Cumulative downloads
Total Downloads
860
Last Day
0%
1
Compared to previous day
Last Week
0%
1
Compared to previous week
Last Month
-50%
6
Compared to previous month
Last Year
-43.8%
73
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
3
Peer Dependencies
1
react-with-styles 
Use CSS-in-JavaScript for your React components without being tightly coupled to one implementation (e.g. Aphrodite, Radium, or React Native). Easily access shared theme information (e.g. colors, fonts) when defining your styles.
Interfaces
Other resources
- eslint-plugin-react-with-styles: ESLint plugin for react-with-styles.
How to use
Create a module that exports an object with shared theme information like colors.
1export default { 2 color: { 3 primary: '#FF5A5F', 4 secondary: '#00A699', 5 }, 6};
Register your default theme and interface. For example, if your default theme is exported by MyDefaultTheme.js, and you want to use Aphrodite, you can set this up in your own withStyles.js file.
1import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet'; 2import aphroditeInterface from 'react-with-styles-interface-aphrodite'; 3import { css, withStyles, ThemeProvider } from 'react-with-styles'; 4 5import MyDefaultTheme from './MyDefaultTheme'; 6 7ThemedStyleSheet.registerDefaultTheme(MyDefaultTheme); 8ThemedStyleSheet.registerInterface(aphroditeInterface); 9 10export { css, withStyles, ThemeProvider, ThemedStyleSheet };
It is convenient to pass through css, withStyles, and ThemeProvider from react-with-styles here so that everywhere you use them you can be assured that the default theme and interface have been registered. You could likely also set this up as an initializer that is added to the top of your bundles and then use react-with-styles directly in your components.
In your component, from our withStyles.js file above, use withStyles() to define styles and css() to consume them.
1import React, { PropTypes } from 'react'; 2import { css, withStyles } from './withStyles'; 3 4function MyComponent({ styles }) { 5 return ( 6 <div> 7 <a 8 href="/somewhere" 9 {...css(styles.firstLink)} 10 > 11 A link to somewhere 12 </a> 13 14 {' '} 15 and 16 {' '} 17 18 <a 19 href="/somewhere-else" 20 {...css(styles.secondLink)} 21 > 22 a link to somewhere else 23 </a> 24 </div> 25 ); 26} 27 28MyComponent.propTypes = { 29 styles: PropTypes.object.isRequired, 30}; 31 32export default withStyles(({ color }) => ({ 33 firstLink: { 34 color: color.primary, 35 }, 36 37 secondLink: { 38 color: color.secondary, 39 }, 40}))(MyComponent);
ThemedStyleSheet
Registers themes and interfaces.
ThemedStyleSheet.registerDefaultTheme(theme)
Registers the default theme. theme is an object with properties that you want to be made available when styling your components.
1import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet'; 2 3ThemedStyleSheet.registerDefaultTheme({ 4 color: { 5 primary: '#FF5A5F', 6 secondary: '#00A699', 7 }, 8});
ThemedStyleSheet.registerTheme(name, overrides)
Registers a named theme that defines overrides for the default theme. This object is merged with the default theme.
1import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
2
3ThemedStyleSheet.registerTheme('tropical', {
4 color: {
5 primary: 'yellow',
6 },
7});Combined with the above example for default theme, color.primary would be 'yellow' and color.secondary would be '#00A699'.
ThemedStyleSheet.registerInterface(interface)
Instructs react-with-styles how to process your styles.
1import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet'; 2import aphroditeInterface from 'react-with-styles-interface-aphrodite'; 3 4ThemedStyleSheet.registerInterface(aphroditeInterface);
<ThemeProvider name="theme name">
This component simply takes a name prop that matches a registered theme, and stores that value in context. This allows sub-trees of your application to change to different themes as necessary.
1import React from 'react'; 2import { ThemeProvider } from './withStyles'; 3 4export default function App() { 5 return ( 6 <div> 7 <MyComponent /> 8 9 <ThemeProvider name="tropical"> 10 <MyComponent /> 11 </ThemeProvider> 12 </div> 13 ); 14}
withStyles([ stylesThunk [, options ] ])
This is a higher-order function that returns a higher-order component used to wrap React components to add styles using the theme provided from context. We use this to abstract away the context, to make themed styles easier to work with.
stylesThunk will receive the theme as an argument, and it should return an object containing the styles for the component.
The wrapped component will receive a styles prop containing the processed styles for this component and a theme prop with the current theme object. Most of the time you will only need the styles prop. Reliance on the theme prop should be minimized.
Example usage
1import React from 'react'; 2import { css, withStyles } from './withStyles'; 3 4function MyComponent({ styles }) { 5 return ( 6 <div {...css(styles.container)}> 7 Try to be a rainbow in someone's cloud. 8 </div> 9 ); 10} 11 12export default withStyles(({ color, unit }) => ({ 13 container: { 14 color: color.primary, 15 marginBottom: 2 * unit, 16 }, 17}))(MyComponent);
Or, as a decorator:
1import React from 'react'; 2import { css, withStyles } from './withStyles'; 3 4@withStyles(({ color, unit }) => ({ 5 container: { 6 color: color.primary, 7 marginBottom: 2 * unit, 8 }, 9})) 10export default function MyComponent({ styles }) { 11 return ( 12 <div {...css(styles.container)}> 13 Try to be a rainbow in someone's cloud. 14 </div> 15 ); 16}
Options
stylesPropName (default: 'styles')
By default, withStyles() will pass down the styles to the wrapped component in the styles prop, but the name of this prop can be customized by setting the stylesPropName option. This is useful if you already have a prop called styles and aren't able to change it.
1import React from 'react'; 2import { css, withStyles } from './withStyles'; 3 4function MyComponent({ withStylesStyles }) { 5 return ( 6 <div {...css(withStylesStyles.container)}> 7 Try to be a rainbow in someone's cloud. 8 </div> 9 ); 10} 11 12export default withStyles(({ color, unit }) => ({ 13 container: { 14 color: color.primary, 15 marginBottom: 2 * unit, 16 }, 17}), { stylesPropName: 'withStylesStyles' })(MyComponent);
themePropName (default 'theme')
Likewise, the theme prop name can also be customized by setting the themePropName option.
1import React from 'react'; 2import { css, withStyles } from './withStyles'; 3 4function MyComponent({ styles, withStylesTheme }) { 5 return ( 6 <div {...css(styles.container)}> 7 <Background color={withStylesTheme.color.primary}> 8 Try to be a rainbow in someone's cloud. 9 </Background> 10 </div> 11 ); 12} 13 14export default withStyles(({ color, unit }) => ({ 15 container: { 16 color: color.primary, 17 marginBottom: 2 * unit, 18 }, 19}), { themePropName: 'withStylesTheme' })(MyComponent);
flushBefore (default: false)
Some components depend on previous styles to be ready in the component tree when mounting (e.g. dimension calculations). Some interfaces add styles to the page asynchronously, which is an obstacle for this. So, we provide the option of flushing the buffered styles before the rendering cycle begins. It is up to the interface to define what this means.
css(...styles)
This function takes styles that were processed by withStyles(), plain objects, or arrays of these things. It returns an object with an opaque structure that must be spread into a JSX element.
1import React from 'react'; 2import { css, withStyles } from './withStyles'; 3 4function MyComponent({ bold, padding, styles }) { 5 return ( 6 <div {...css(styles.container, { padding })}> 7 Try to be a rainbow in{' '} 8 <a 9 href="/somewhere" 10 {...css(styles.link, bold && styles.link_bold)} 11 > 12 someone's cloud 13 </a> 14 </div> 15 ); 16} 17 18export default withStyles(({ color, unit }) => ({ 19 container: { 20 color: color.primary, 21 marginBottom: 2 * unit, 22 }, 23 24 link: { 25 color: color.secondary, 26 }, 27 28 link_bold: { 29 fontWeight: 700, 30 }, 31}))(MyComponent);
className and style props must not be used on the same elements as css().
Examples
With React Router's Link
React Router's <Link/> and <IndexLink/> components accept activeClassName='...' and activeStyle={{...}} as props. As previously stated, css(...styles) must spread to JSX, so simply passing styles.thing or even css(styles.thing) directly will not work. In order to mimic activeClassName/activeStyles you can use React Router's withRouter() Higher Order Component to pass router as prop to your component and toggle styles based on router.isActive(pathOrLoc, indexOnly). This works because <Link /> passes down the generated className from css(..styles) down through to the final leaf.
1import React from 'react'; 2import { withRouter, Link } from 'react-router'; 3import { css, withStyles } from '../withStyles'; 4 5function Nav({ router, styles }) { 6 return ( 7 <div {...css(styles.container)}> 8 <Link 9 to="/" 10 {...css(styles.link, router.isActive('/', true) && styles.link_bold)} 11 > 12 home 13 </Link> 14 <Link 15 to="/somewhere" 16 {...css(styles.link, router.isActive('/somewhere', true) && styles.link_bold)} 17 > 18 somewhere 19 </Link> 20 </div> 21 ); 22} 23 24export default withRouter(withStyles(({ color, unit }) => ({ 25 container: { 26 color: color.primary, 27 marginBottom: 2 * unit, 28 }, 29 30 link: { 31 color: color.primary, 32 }, 33 34 link_bold: { 35 fontWeight: 700, 36 } 37}))(Nav));
In the wild
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
security policy file detected
Details
- Info: security policy file detected: github.com/airbnb/.github/SECURITY.md:1
- Info: Found linked content: github.com/airbnb/.github/SECURITY.md:1
- Warn: One or no descriptive hints of disclosure, vulnerability, and/or timelines in security policy
- Info: Found text in security policy: github.com/airbnb/.github/SECURITY.md:1
Reason
Found 8/12 approved changesets -- score normalized to 6
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node-pretest.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/airbnb/react-with-styles/node-pretest.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/node-pretest.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/airbnb/react-with-styles/node-pretest.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/node.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/airbnb/react-with-styles/node.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/airbnb/react-with-styles/node.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/node.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/airbnb/react-with-styles/node.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/rebase.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/airbnb/react-with-styles/rebase.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/rebase.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/airbnb/react-with-styles/rebase.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/require-allow-edits.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/airbnb/react-with-styles/require-allow-edits.yml/master?enable=pin
- Warn: downloadThenRun not pinned by hash: .github/workflows/node.yml:36
- Info: 0 out of 3 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 5 third-party GitHubAction dependencies pinned
- Info: 0 out of 1 downloadThenRun dependencies pinned
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/node-pretest.yml:1
- Warn: no topLevel permission defined: .github/workflows/node.yml:1
- Warn: no topLevel permission defined: .github/workflows/rebase.yml:1
- Warn: no topLevel permission defined: .github/workflows/require-allow-edits.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 27 are checked with a SAST tool
Score
5
/10
Last Scanned on 2025-03-10
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More