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
)่ดก็ฎ่ ๏ผ
