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
- want to redirect to page after the action is dispatched in useEffect
- React - Do I HAVE to add an onChange event handler to each input field to make input field NOT read only?
- Error when rendering Nav.Link in react-bootstrap@1.0.0-beta.5
- Add CSS ClassName dynamically in React loop Based on Condition
- Refreshing page gives Cannot GET /page_url in react-router 2
- How to update a react-chartjs-2 plot using useState()
- Redirect component of React not working as expected in axios .then() promise
- ReactJS issue when using capitalized methods
- useReducer dispatch executing twice
- How can I mock FileReader with jest?
- Programmatically creating links for static pages with next.js
- Why JSON object isn't being stored properly?
- Multiple unique dropdown security questions in REACT.js
- Nesting in emotion using css
- React Hooks (Functional) Lifecycle: Component rendered before useEffect() code
- Displaying a Facebook Auth photoURL in React
- Passing information through a button in REACT
- Drag and drop - drop target sticks in some cases
- How to override Bootstrap theme colors in bootstrapped react/redux app?
- call to onBlur gives TypeError: (destructured parameter) is undefined
- React-router: Pass props in Link and map match data
- How to convert a div to input and then the input into div (onclick)
- Uncaught ReferenceError: ReactDOM is not defined with bundle.js
- How to avoid getting error 'localStorage is not defined' on server in ReactJS isomorphic app?
- React state is changing but a part of previous data still show up top of the table
- why here i am not getting scroll event , but click event is firing may be something i am doing wrong
- Why I get 30 fps in chrome dev tool performance panel, but JS and React both say it's 60?
- updated state value are not updated inside function in react
- How to select option by id or by name in Autocomplete Material-UI
- How to get the id of a react material-ui component