Can You Use Es6 Import Alias Syntax For React Components?

Answer :

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')  

Try to import this way

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

---

I suppose you export

export default StyledLibrary 

Careful with capitalisation. Best to always CamelCase.

One:

import Thing from "component"; 

One with alias:

import {Thing as OtherThing} from "component"; 

One with alias plus other defaults:

import {Thing as OtherThing}, Stuff, Fluff from "component"; 

More detailed example

import {Thing as StyledButton}, {Stuff as Stuffing}, {Fluff as Fluffy}, Wool, Cotton from "component";