Can you use es6 import alias syntax for React Components?

Question

I'm trying to do something like the following, however it returns null:

import { Button as styledButton } from 'component-library' 

then attempting to render it as:

import React, { PropTypes } from "react"; import cx from 'classNames';  import { Button as styledButton } from 'component-library';  export default class Button extends React.Component {     constructor(props){         super(props)     }     render() {         return (                 <styledButton {...this.props}></styledButton>         )     } } 

The reason is, I need to import the Button component from a library, and also export a wrapper component with the same name but maintaining the functionality from the imported component. If I leave it at import { Button } from component library then of course, I get a multiple declaration error.

Any ideas?

Answer 1

Your syntax is valid. JSX is syntax sugar for React.createElement(type) so as long as type is a valid React type, it can be used in JSX "tags". If Button is null, your import is not correct. Maybe Button is a default export from component-library. Try:

import {default as StyledButton} from "component-library"; 

The other possibility is your library is using commonjs exports i.e. module.exports = foo. In this case you can import like this:

import * as componentLibrary from "component-library"; 

Update

Since this is a popular answer, here a few more tidbits:

export default Button              -> import Button from './button'                                       const Button = require('./button').default           export const Button                -> import { Button } from './button'                                       const { Button } = require('./button')           export { Button }                  -> import { Button } from './button'                                       const { Button } = require('./button')           module.exports.Button              -> import { Button } from './button'                                       const { Button } = require('./button')  module.exports.Button = Button     -> import { Button } from './button'                                       const { Button } = require('./button')  module.exports = Button            -> import * as Button from './button'                                       const Button = require('./button')  

Answer 2

Try to import this way

import {default as StyledLibrary} from 'component-library'; 

---

I suppose you export

export default StyledLibrary