Babel Plugin Glamorous Displayname Save

A babel plugin for Glamorous displayNames 💄

Project README

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

.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):


Bernard Lin

💻 📖 ⚠️

Kent C. Dodds

🐛 💻 📖 🤔 🚇 📢 ⚠️

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

LICENSE

MIT

Open Source Agenda is not affiliated with "Babel Plugin Glamorous Displayname" Project. README Source: bernard-lin/babel-plugin-glamorous-displayname
Stars
32
Open Issues
2
Last Commit
6 years ago
License
MIT

Open Source Agenda Badge

Open Source Agenda Rating