Awesome
<div align="center"> <h1>babel-plugin-glamorous-displayname</h1> <p>add a displayName property to glamorous components</p> </div> <hr />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
<!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> <!-- END doctoc generated TOC please keep comment here to allow auto update -->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-displayname/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):
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore -->This project follows the all-contributors specification. Contributions of any kind welcome!
LICENSE
MIT