Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
create-styled-element
Advanced tools
Changelog
0.6.0
Move to glamor dependency to 2.20.40
since 3
has been abandoned
Readme
Thin wrapper around Glamor to create styled elements in React. Please refer to the Glamor Docs for any advance styling needs like animations, keyframes, etc.
The goal of this library is to be as small as possible. If you need features like theming and prop styles, I suggest using Glamorous. Many thanks to their work and inspiring me to write this library.
yarn add create-styled-element
npm install create-styled-element --save
import createStyledElement from 'create-styled-element'
function Column({ size, ...props }) {
const staticStyles = {
display: 'flex',
flexDirection: 'column'
}
const dynamicStyles = {
flex: `0 0 ${size / 12 * 100}`
}
// we use multiple chunks here to help reduce duplicate styles
// since the "size" prop can produce multiple styles
return createStyledElement('div', props)(
staticStyles,
dynamicStyles
)
}
const App = () => (
<Column size={6} css={{ backgroundColor: '#b4da55' }}/>
)
createStyledElement(component[, props, children])(...css)
This works almost exactly like React's create element, except it returns a function that allows you to pass default css styles and interact with props. It will also merge a css
prop in so you can override styles later on if you need to.
The initial CSS chunks passed to the function created by createStyledElement
are written left to right as their own glamor
classnames. If a css
prop is passed it will be written as its own glamor
rule and added last.
By using different "chunks" of CSS you can reduce how much CSS is generated. You can see in the example above we will only ever create one class name for the static styles, whereas the dynamic styles can change over time and result in additional rules.
css
PropTypes.oneOf([PropTypes.object, PropTypes.array])Pass any styling overrides to your component.
innerRef
PropTypes.funcGet access to the internal ref
.
forwardRef
PropTypes.boolForward the innerRef
prop, rather than passing it as a ref
. Note you only need this when composing another styled element and need access to the root ref
.
built-in styled elements
stolen from glamorous 🙏
Naming things is hard. Pre-created styled elements are exposed on the createStyledElement
function, and as imports for each DOM node type.
// tags with the same name as built-in JavaScript objects are importable with a Tag suffix
// and tag names that contain dashes are transformed to CamelCase
import { Section, H1, MapTag } from 'create-styled-element'
const App = () => (
<Section css={{ padding: 32 }}>
<H1 css={{ color: `rgba(0, 0, 0, 0.75)`}}>
Styled Heading!
</H1>
</Section>
)
clone repo
git clone git@github.com:souporserious/create-styled-element.git
move into folder
cd ~/create-styled-element
install dependencies
yarn
run dev mode
yarn dev
open your browser and visit: http://localhost:8080/
FAQs
Simple wrapper around glamor to create styled elements in React.
The npm package create-styled-element receives a total of 188 weekly downloads. As such, create-styled-element popularity was classified as not popular.
We found that create-styled-element 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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.