score:194
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')
score:0
note that when you capitalized StyledLibrary and it worked
whereas, in the original question, you did not capitalize styledButton and it did not work
both of these are the expected results with React
so you didn't discover a workaround, you simply discovered the (documented) React way of doing things
score:4
No idea why I am not able to alias the import;
As a work around, I ended up doing this:
import React, { PropTypes } from "react";
import * as StyledLibrary from 'component-library';
export default class Button extends React.Component {
constructor(props){
super(props)
}
render() {
return (
<StyledLibrary.Button {...this.props}></StyledLibrary.Button>
)
}
}
Thanks all
score:5
User-Defined Components Must Be Capitalized
https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized
change your code to
import { Button as StyledButton } from 'component-library';
....bah...bah....bah
<StyledButton {...this.props}></StyledButton>
score:9
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";
score:21
Try to import this way
import {default as StyledLibrary} from 'component-library';
I suppose you export
export default StyledLibrary
Source: stackoverflow.com
Related Query
- Can you use es6 import alias syntax for React Components?
- How import statement works in ES6 for React Components
- use ES6 .map() on multiple times nested objects for react components
- React | Npm package - How can I export 2 components for use as an npm package
- How I can use react 0.13 with ES6 syntax on old project?
- Can I use index of map function as key for my React components containing dynamic unpredictable text?
- When using react cdn links for a site does it require the use of class components or can I use function components?
- Can i use foreach when i import all components in React JS?
- React Components - No Inheritance, how can pass ref or use HOC for my BaseComponent
- When to use ES6 class based React components vs. functional ES6 React components?
- How to import and export components using React + ES6 + webpack?
- react Material-ui, How do I know I can use onClick for button?
- Can you use React Native to create a desktop application?
- Can you pass down state to child components with React Hooks?
- Can I use arrow functions instead of normal functions for React Hooks?
- Can I use redux-saga's es6 generators as onmessage listener for websockets or eventsource?
- React hook form v7 Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()
- Using Jquery and Bootstrap with Es6 Import for React App
- how to import data in react from a js file to use in components
- How can I use React Material UI's transition components to animate adding an item to a list?
- How do you correctly use React.lazy() in Typescript to import a react component with a generic type parameter?
- React Admin: Can I use another field for <ReferenceInput>, other than "id"?
- can i use the tsx extension for test files if using react with typescript
- How can I import React Components as a package/module from some other(non-project) directory?
- Why shouldn't you use import all in ES6
- How to use inheritance with React components and es6 classes
- Is it a good React pattern to use ES2016 Property Initializer Syntax in ES6 classes
- Can you import an external CSS file in a React js file?
- Why use ES6 computed property syntax for object setState?
- How can I implement destructuring assignment for functional react components props?
More Query from same tag
- Axios with Redux Saga not sending form data when insert and put to nodeJs+express api
- How to render react component in Leaflet popup.setContent()
- Why am I getting a “Cannot return null for non-nullable field” error when doing a mutation?
- react-chart-js-2 keep bar width no matter what the number of bar is
- Is there a way to spread props over a component without overriding specified attributes?
- React child component props : _this2.props.deleteIt is not a function
- TypeError: Cannot read property 'postId' of undefined (this.props.params no longer accessible )
- Upload an image and change the background
- Submit Page Information using Hooks
- Redux Added Array of Object Inside Another Aray in React
- Dynamically Set Type of Prop Based on Another Prop
- Using React Hook to search and filter items from Api with pagination
- react-jsx-parser can't map content
- How do I effectively npm link when using bit.dev?
- Ant design 4.0.1 - Access methods of child form inside class component from parent component
- React-Router V4 - Passing Props to Render function in Route Component to generate new component
- React pass specific state to the Modal component on click
- How to render component's child instead of entire component
- submit a list of questions to database
- Reactjs together with TinyMCE editor code plugin
- Returning multiple elements in JSX
- ReactJs - TypeError: Cannot assign to read only property 'transform' of object '#<Object>'
- Align two elements on the same line using flex: one left and one right
- Pass the whole data to the onChange in a select tag
- How to run electron app inside docker image?
- Using react dev tools inside iframe [In Chrome]
- Map Icons to Categories from API Call React Typescript Frontend
- React - use Link to and pass data to new component
- MUI Tab indicator styling override
- In React how to update multiple check box values in to array ?