Basic Concepts

This module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies:

npm install --save glamorous

This also depends on react and glamor so you'll need those in your project as well (if you don't already have them):

npm install --save react glamor

NOTE: If you're using React v15.5 or greater, you'll also need to have prop-types installed: npm install --save prop-types

You can then use one of the module formats:

• main: dist/glamorous.cjs.js - exports itself as a CommonJS module
• global: dist/glamorous.umd.js and dist/glamorous.umd.min.js - exports itself as a umd module which is consumable in several environments, the most notable as a global.
• jsnext:main and module: dist/glamorous.es.js - exports itself using the ES modules specification, you'll need to configure webpack to make use of this file do this using the resolve.mainFields property.

The most common use-case is consuming this module via CommonJS:

const glamorous = require('glamorous')
const {ThemeProvider} = glamorous
// etc.

If you're transpiling (and/or using the jsnext:main):

import glamorous, {ThemeProvider} from 'glamorous'

// you can also import specific Glamorous Components (see section below on "Built-in" components)
import {Div, H2} from 'glamorous'

// 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 {MapTag, ColorProfile} from 'glamorous'

If you want to use the global:

<!-- Load dependencies -->
<script src="https://unpkg.com/react/dist/react.js"></script>
<script src="https://unpkg.com/prop-types/prop-types.js"></script>
<script src="https://unpkg.com/glamor/umd/index.js"></script>
<!-- load library -->
<script src="https://unpkg.com/glamorous/dist/glamorous.umd.js"></script>
<script>
// Use window.glamorous here...
const glamorous = window.glamorous
const {ThemeProvider} = glamorous
</script>

Here is a basic example that shows you how to get started making component with css-in-js magic.

One of the nice bits of glamorous is that it allows you to make a clear separation between your dynamic and static styles by forcing you to choose between an object literal and a function. Here's an example of having both dynamic and static styles:

const MyLink = glamorous.a(
  {
    color: 'blue',
    textDecoration: 'none',
  },
  ({size = 'small'}) => ({
    fontSize: size === 'big' ? 24 : 16,
  }),
  // you can continue to provide any number of arguments
  // and `glamor` will merge them. In the event of a
  // style conflict, the last one wins.
)

You can see a live preview of this example on codesandbox.

const MyDiv = glamorous.div(
  [
    {
      [phoneMediaQuery]: {
        lineHeight: 1.2,
      },
    },
    {
      [phoneMediaQuery]: {
        lineHeight: 1.3, // this will win because it comes later
      },
    },
  ],
  ({big, square}) => {
    const bigStyles = big ?
    {
      [phoneMediaQuery]: {
        fontSize: 20,
      },
    } :
      {}

    const squareStyles = square ?
    {
      [phoneMediaQuery]: {
        borderRadius: 0,
      },
    } :
    {
      [phoneMediaQuery]: {
        borderRadius: '50%',
      },
    }
    // note that I'm returning an array here
    return [bigStyles, squareStyles]
  },
)

// result of <MyDiv big={true} square={false} /> will be:
// @media (max-width: 640px) {
//   .css-1bzhvkr,
//   [data-css-1bzhvkr] {
//     line-height: 1.3;
//     font-size: 20px;
//     border-radius: 50%;
//   }
// }
//
// <div
//   class="css-1bzhvkr"
// />

To do animation with glamorous, you can use regular CSS transitions for simple things, and for more advanced stuff, you can use keyframes via glamor's css.keyframes API.

glamorous offers a version for React Native projects called glamorous-native.

npm install glamorous-native --save

You can learn more at the glamorous-native project.