Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

babel-plugin-glamorous-displayname

Package Overview
Dependencies
2
Maintainers
2
Versions
13
Issues
File Explorer

Advanced tools

babel-plugin-glamorous-displayname

add a displayName property to glamorous components

    2.2.0latest

Version published
Maintainers
2
Yearly downloads
16,858
decreased by-30.5%

Weekly downloads

Readme

Source

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/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

Keywords

FAQs

What is babel-plugin-glamorous-displayname?

add a displayName property to glamorous components

Is babel-plugin-glamorous-displayname popular?

The npm package babel-plugin-glamorous-displayname receives a total of 200 weekly downloads. As such, babel-plugin-glamorous-displayname popularity was classified as not popular.

Is babel-plugin-glamorous-displayname well maintained?

We found that babel-plugin-glamorous-displayname demonstrated a not healthy version release cadence and project activity. It has 2 open source maintainers collaborating on the project.

Last updated on 31 Jan 2018
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc