Integrations
glamorouscreate-react-app
Here is an example
of using glamorous with create-react-app.
next.js
Here's a deployed example of using glamorous with Next.js. See the code here.
jest
Here
is an example of using glamorous with jest.
✨ polished
glamorous works with ✨ polished mixins, helpers, and shorthands:
const MyStyledParagraph = glamorous.p({
fontSize: 20,
color: lighten(0.5, '#000'),
})You can also use object spread properties to apply more complex ✨ polished mixins directly onto glamorous components:
function GlamorousLogo() {
return (
<glamorous.Div
width={400}
height={400}
border="2px solid"
borderColor={mix(0.5, '#fff', '#000')}
{...borderRadius('top', '5px')}
>
</glamorous.Div>
);
}CodeSandbox
styled-system
glamorous works with styled-system helper functions.
Interactive demo
CodeSandbox
glamorous-pseudo
A handy abstraction
With the built-in components, if you want to use pseudo-states, you have to
use the css prop. If you'd rather not do that, then you can use
glamorous-pseudo.
Inspiration
This was inspired by this tweet from @tkh44. Thanks!
CodeSandbox
glamor
You can use glamor to define CSS and use the className to apply styles to a glamorous component. This is pretty handy for creating reusable style objects, or doing fun things like keyframe animations.
const { css } = glamor // make the keyframes with glamor const bounce = css.keyframes({ '0%': { transform: `scale(1.1)` }, '100%': { transform: `scale(0.9)` } }) // create a component with style const AnimatedDiv = glamorous.div({ fontSize: 50, width: '100%', textAlign: 'center', // animate the div with the keyframes animation: `${bounce} 0.25s infinite ease-in-out alternate` }) render( <AnimatedDiv>😎</AnimatedDiv> )
recompose
glamorous creates simple components, if you'd like to enhance these components
further, you can do so easily by wrapping them in a component yourself:
Example of wrapping a glamorous component
If that's a bit too much of a song and dance for you, then you might consider
using recompose.
CodeSandbox
preact
This library supports preact out of the box. Just change module name from glamorous to glamorous/preact and you're all set.
If you don't want to type glamorous/preact every time, you can use webpack's resolve.alias or babel's resolver plugin to shorten the module name to your liking.
import { render, h } from "preact"
import { H1, Span } from "glamorous/preact"
const Heart = <Span color="tomato">❤</Span>
const App = () =>
<H1 textDecoration="underline">
glamorous {Heart} preact
</H1>
render(
<App/>,
document.body
)Contributors:
