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?
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";
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";