Security News
npm Updates Search Experience with New Objective Sorting Options
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
@cloudflare/style-container
Advanced tools
Cloudflare Style Container
Set of high order components and other helpers for fela based applications.
$ npm install cf-style-container
We proxy/alias some useful functions from fela without changing their behaviour. See the original documentation for more details. We wrap all Fela APIs so we can eventually switch Fela to a different CSS in JS lib if ever needed.
Very similar to
createComponent
from react-fela. However, it automatically adds PropTypes from [type]
in case
that it is a React Component.
Adds a displayName to the created component, which is
${getReactDisplayName(type})
. If type
is a primitive such as 'div', then
this string is used, otherwise the displayName of the wrapped React Component is
used.
You should use this HOC every time when you want to use Fela in your component. This is a primary way how to style React components.
import React from 'react';
import PropTypes from 'prop-types';
import { createComponent } from 'cf-style-container';
const styles = ({ theme, size }) => ({
fontWeight: theme[`fontWeight${size}`],
fontSize: theme[`fontSize${size}`],
lineHeight: theme[`lineHeight${size}`],
marginTop: theme[`marginTop${size}`]
});
const Heading = ({ size, className, children }) => {
const tagName = 'h' + size;
return React.createElement(tagName, { className }, children);
};
Heading.propTypes = {
size: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).isRequired,
className: PropTypes.string.isRequired,
children: PropTypes.node
};
export default createComponent(styles, Heading);
Creates a new component that implements the component styling API and maps style rules to design system primitives.
Style rules can be defined in a similar fashion to createComponent
during
initialisation, but can also be overridden on an instance-by-instance basis
using props on the component itself.
const Box = createStyledComponent(() => {});
<Box backgroundColor="blue.4" px={3} py={2}>
What a lovely blue box!
</Box>;
Useful when you need multiple classNames (and rules) in one component.
Adds a displayName to the created component, which is
${getReactDisplayName(type)}
. If type
is a primitive such as 'div', then
this string is used, otherwise the displayName of the wrapped React Component is
used.
import React from 'react';
import PropTypes from 'prop-types';
import { createComponentStyles } from 'cf-style-container';
const mainStyles = ({ theme }) => ({
margin: theme.main.margin,
padding: theme.main.padding
});
const legendStyles = ({ theme }) => ({
padding: theme.legend.padding,
marginBottom: theme.legend.marginBottom,
borderBottom: theme.legend.borderBottom
});
const FormFieldset = ({ legend, styles }) => (
<fieldset className={styles.mainStyles}>
<legend className={styles.legendStyles}>{legend}</legend>
</fieldset>
);
FormFieldset.propTypes = {
styles: PropTypes.object.isRequired,
legend: PropTypes.string.isRequired
};
export default createComponentStyles(
{ mainStyles, legendStyles },
FormFieldset
);
Notice that rules are now an object. The names you chose will be used for
classNames accessible as styles.mainStyles
and styles.legendStyles
in this
case.
A HOC that ties a Fela component with the theme (adds the theme to its context). The themes can be functions that takes a baseTheme and returns a new theme, or just an object.
Adds a displayName to the created component, which is
${getReactDisplayName(type)}
. If type
is a primitive such as 'div', then
this string is used, otherwise the displayName of the wrapped React Component is
used.
import HeadingUnstyled from './Heading';
import HeadingTheme from './HeadingTheme';
import { applyTheme } from 'cf-style-container';
// overrides HeadingTheme fontWeight1
const CustomTheme = () => {
fontWeight1: 600;
};
const Heading = applyTheme(HeadingUnstyled, HeadingTheme, CustomTheme);
// themed component
<Heading />;
A HOC that passes the current theme from context into the prop theme
. This is
useful when you need to access the theme without using createComponent
. In
other words, you can't create a new styled component with it.
import { withTheme } from 'cf-style-container';
const MyComponent = ({ theme }) => <div>Color: {theme.colors.hail}</div>;
export default withTheme(MyComponent);
A HOC that passes the renderer from context into the prop renderer
. This is
useful for third party integration when you need to generate a class name and
you can't create a new styled component with it.
Adds a displayName to the created component, which is
${getReactDisplayName(type)}
. If type
is a primitive such as 'div', then
this string is used, otherwise the displayName of the wrapped React Component is
used.
import { withRenderer } from 'cf-style-container';
const MyComponent = ({ theme }) => {
const styles = props => ({
fontSize: props.fontSize,
color: 'red'
});
const className = renderer.renderRule(styles, { fontSize: 12 });
return <div>Class name: {className}</div>;
};
export default withRenderer(MyComponent);
A HOC that applies a string of static styles to a component using fela's renderStatic. Useful for integration with older libraries that require side loading of a static CSS block.
Accepts a function or a string. If a function is provided, the baseTheme will be provided to the function.
Adds a displayName to the created component, which is
${getReactDisplayName(type)}
. If type
is a primitive such as 'div', then
this string is used, otherwise the displayName of the wrapped React Component is
used.
import { applyStaticStyles } from 'cf-style-container';
const staticStyles = '.purple-component { background-color: purple }';
// OR
// const staticStyles = baseTheme => `.purple-component{background-color: ${baseTheme.purple} }`
const MyComponent = () => <div className="purple-component" />;
export default applyStaticStyles(staticStyles, MyComponent);
FAQs
Cloudflare Style Container
The npm package @cloudflare/style-container receives a total of 5,250 weekly downloads. As such, @cloudflare/style-container popularity was classified as popular.
We found that @cloudflare/style-container demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 35 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.
Security News
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
Security News
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.