babel-plugin-glamorous-displayname
v1.1.5babel-plugin-glamorous-displayname
add a displayName property to glamorous components
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()
Out
const MyStyledButton = glamorous.button.withConfig({
displayName: 'MyStyledButton',
})
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
Metadata
- MIT
- Whatever
- Kent C. Dodds, Bernard Lin
- released 8/15/2017