Have opinions about JavaScript? We want to hear them. Take the 2018 JavaScript Ecosystem Survey »

babel-plugin-glamorous-displayname

2.2.0 • Public • Published

babel-plugin-glamorous-displayname

add a displayName property to glamorous components


Build Status Code Coverage version downloads MIT License

All Contributors PRs Welcome Code of Conduct

Watch on GitHub Star on GitHub Tweet

The problem

You want to use glamorous, but you want to have a better experience with the DevTools (because you lose the automatic displayName magic that the react babel preset gives you).

This solution

Adds the displayName to glamorous components.

In

const MyStyledButton = glamorous.button()

Alt text

Out

const MyStyledButton = glamorous.button.withConfig({
  displayName: 'MyStyledButton',
})

Alt text

Table of Contents

Installation

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

npm install --save-dev babel-plugin-glamorous-displayname

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["glamorous-displayname"]
}

Via CLI

$ babel --plugins glamorous-displayname script.js

Via Node API

require('babel').transform('code', {
  plugins: ['glamorous-displayname'],
})

Use with babel-plugin-macros

Once you've configured babel-plugin-macros you can import/require the glamorous macro at babel-plugin-glamorous/macro. For example:

import glamorous from 'babel-plugin-glamorous/macro'
 
const MyStyledInput = glamorous.input({
  /* your styles */
})

You could also use glamorous.macro if you'd prefer to type less 😀

Inspiration

Other Solutions

I'm not aware of any, if you are please make a pull request and add it here!

Contributors

Thanks goes to these people (emoji key):


Bernard Lin

💻 📖 ⚠️

Kent C. Dodds

🐛 💻 📖 🤔 🚇 📢 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT

install

npm i babel-plugin-glamorous-displayname

Downloadsweekly downloads

1,149

version

2.2.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
Report a vulnerability