jxnblk / Nano Style
Licence: mit
React functional CSS-in-JS
Stars: ✭ 85
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Nano Style
tsstyled
A small, fast, and simple CSS-in-JS solution for React.
Stars: ✭ 52 (-38.82%)
Mutual labels: components, style, css-in-js
css-render
Generating CSS using JS with considerable flexibility and extensibility, at both server side and client side.
Stars: ✭ 137 (+61.18%)
Mutual labels: style, css-in-js
Reactackle
Open-source components library built with React and Styled-Components.
Stars: ✭ 278 (+227.06%)
Mutual labels: components, css-in-js
Glamorous Primitives
💄 style primitive React interfaces with glamorous
Stars: ✭ 91 (+7.06%)
Mutual labels: style, css-in-js
Expo Dark Mode Switch
A beautiful React dark mode switch component for iOS, Android, and Web
Stars: ✭ 137 (+61.18%)
Mutual labels: style, css-in-js
Switzerland
🇨🇭Switzerland takes a functional approach to Web Components by applying middleware to your components. Supports Redux, attribute mutations, CSS variables, React-esque setState/state, etc… out-of-the-box, along with Shadow DOM for style encapsulation and Custom Elements for interoperability.
Stars: ✭ 261 (+207.06%)
Mutual labels: functional, components
Design System
Priceline.com Design System
Stars: ✭ 604 (+610.59%)
Mutual labels: components, css-in-js
Macro Components
Create flexible layout and composite UI components without the need to define arbitrary custom props
Stars: ✭ 485 (+470.59%)
Mutual labels: style, components
Fela
State-Driven Styling in JavaScript
Stars: ✭ 2,097 (+2367.06%)
Mutual labels: components, css-in-js
Torus
Torus is an event-driven model-view UI framework for the web, focused on being tiny, efficient, and free of dependencies.
Stars: ✭ 136 (+60%)
Mutual labels: components, css-in-js
glitz
Lightweight CSS-in-JS library with high performance written in TypeScript
Stars: ✭ 42 (-50.59%)
Mutual labels: style, css-in-js
Handycontrols
Contains some simple and commonly used WPF controls based on HandyControl
Stars: ✭ 347 (+308.24%)
Mutual labels: style, components
Jss
JSS is an authoring tool for CSS which uses JavaScript as a host language.
Stars: ✭ 6,576 (+7636.47%)
Mutual labels: components, css-in-js
Kendo React
Issue tracker - KendoReact http://www.telerik.com/kendo-react-ui/
Stars: ✭ 77 (-9.41%)
Mutual labels: components
Kit
Tools for developing, documenting, and testing React component libraries
Stars: ✭ 1,201 (+1312.94%)
Mutual labels: components
nano-style
React functional CSS-in-JS
npm i nano-style
- Use object literals or CSS syntax
- Pure React - no side effects
- Functional styles
- Theming support
- Universal rendering with no additional setup
- Removes props defined as propTypes from rendered HTML
Usage
Object Literal Syntax
import styled from 'nano-style'
const Button = styled('button')(props => ({
fontFamily: 'inherit',
fontSize: '14px',
fontWeight: props.theme.bold,
lineHeight: 16/14,
display: 'inline-block',
margin: 0,
paddingLeft: props.theme.space[3] + 'px',
paddingRight: props.theme.space[3] + 'px',
paddingTop: props.theme.space[2] + 'px',
paddingBottom: props.theme.space[2] + 'px',
verticalAlign: 'middle',
textAlign: 'center',
textDecoration: 'none',
borderRadius: props.theme.radius,
border: 0,
appearance: 'none',
color: 'white',
backgroundColor: props.theme.colors.blue,
'&:hover': {
boxShadow: `inset 0 0 0 999px ${darken(1/8)}`
},
'&:focus': {
outline: 0,
boxShadow: `0 0 0 2px ${props.theme.colors.blue}`
},
'&:active': {
boxShadow: `inset 0 0 8px ${darken(1/4)}`
},
'&:disabled': {
opacity: 1/4
}
}))
CSS Syntax
import styled from 'nano-style/css'
const Button = styled('button')`
font-family: inherit;
font-size: 14px;
font-weight: ${props => props.theme.bold};
line-height: ${16/14};
display: inline-block;
margin: 0;
padding-left: ${props => props.theme.space[3] + 'px'};
padding-right: ${props => props.theme.space[3] + 'px'};
padding-top: ${props => props.theme.space[2] + 'px'};
padding-bottom: ${props => props.theme.space[2] + 'px'};
vertical-align: middle;
text-align: center;
text-decoration: none;
border-radius: ${props => props.theme.radius};
border: 0;
appearance: none;
color: white;
background-color: props.theme.colors.blue;
&:hover {
box-shadow: inset 0 0 0 999px ${darken(1/8)};
}
&:focus {
outline: 0;
box-shadow: 0 0 0 2px ${props => props.theme.colors.blue};
}
&:active {
box-shadow: inset 0 0 8px ${darken(1/4)};
}
&:disabled {
opacity: 1/4
}
`
How it works
Using React 16's ability to return arrays of elements,
nano-style generates CSS during component rendering
and inserts CSS into a <style>
element inlined with the component.
The returned array looks something like this:
return [
<Style css={css} />,
<Component {...props} />
]
Caveats
Currently, this approach does not attempt to deduplicate repeated CSS when a single component is rendered in multiple instances. While this does work, it may present some slight performance issues when a component is used multiple times in a page.
Potential areas for improvement
- Caching mechanism
- Babel plugin
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].