export default withModalMounter(injectIntl(Poll));
I want to extract Poll while importing it in a different component. It looks that that while importing I am just able to import withModalMounter component and not the methods of Poll.
Since you want to import Poll component without withModalMounter too. You can export it like below
const withInjectIntl = injectIntl(Poll);
export { withInjectIntl as Poll };
export default withModalMounter(withInjectIntl);
Post this you can import it like
import PollWithMounter, { Poll } from 'path/to/poll';
Related
I'm ultimately trying to dynamically create an object of imported components to export all at once. But in my simple example below, I can't even export an object with 1 component. Why is that?
// index.js
// Card is a standard ReactJS component, exported with export default Card
import Card from './Card';
let Components = {};
Components['Card'] = Card;
// this also doesn't work
// Components['Card'] = require('./Card').default
export default Components;
// Error message: "Attempted import error: 'Card' is not exported from './index.js'"
As the error says, you don't have a named export Cards. You have a default export, Components, which is an object with a property Cards.
If you want to have named export Cards then do
export {Cards};
Or if you don't even need the Components object, you can re-export the component directly with
export {default as Card} from './Card';
However if you really do want to export a default object that holds one or more components as properties, then import it accordingly:
import Components from './index.js';
// use Components.Cards were necessary
See the export documentation on MDN for more information.
Two solution here. Firstly when you assign a component into the Components object you can assign Card as a component like below.
Components['Card'] = <Card/>
and then use it like this
<div>{Components.Card}</div>
Secondly and My favorite is, whatever you have done in the index.js file to store the component is ok. But when you are using it use it like below.
<Component.Card/>
Example
i have shared components folder when i created some components and i want to export all of them to index.js file and then export all of them from that file. thats how it looks from one of the components file:
export default ToggleSwitch;
now in the index file i try to export them again, it looks like this:
export { default as ToggleSwitch } from './ToggleSwitch';
export { default as Input } from './TextField';
export { default as Button } from './Button';
when i try to import one of the components if i import like this:
import Button from '../../shared/components';
i get this error saying that '../../shared/components' does not contain a default export
and when i try to import it like this,
import { Button } from '../../shared/components';
i get error saying Button is not exported from '../../shared/components'.
what am i doing wrong here?
Have you tried importing as import { Button } from 'shared/components';?
For reference, the current codebase I work with has a similar structure for stores (flux stores) and this pattern works.
An example from the codebase: import { ClickStore } from 'stores';.
I have two applications, one of them is written in vanilla javascript with html and css. The other one is a react + redux application.
Is it possible to import and use the components from my react + redux application inside my vanilla javascript application without introducing a dependency on react and redux?
Short answer, yes , depending how you've written the code. Namely, assuming you are using ES6 Modules, or using a transpiler that will handle them as such.
Firstly, remember that react-redux is just an implementation of redux for react. Redux works fine by itself.
Assuming what you are talking about is reusing your reducers and action creators, then that will be fine - as all they are are pure functions.
For example say your app looks like:
index.js
import React from "react";
import store from "./store";
import {createUser} from "./actions";
import { Provider } from 'react-redux';
//etc.
store.js
import { createStore } from 'redux'
import rootReducer from '../reducers'
export default function() {
return createStore(rootReducer);
}
actions.js
export function addUser(name) {
return {
type: "ADD_USER",
payload: name,
}
}
reducers.js
export default function (state ={}, action) {
return {
value: action.payload
}
}
In this scenario, lets say you want to reuse the action, and the reducer.
Then you can just import the functions from these modules. ESM modules are smart enough to just import what they need.
On the otherhand, say you were importing the createStore (default) method, then you would also be importing the dependency on redux.
I'm using MaterialUI and I have to export my components like this:
import withStyles, { WithStyles } from "#material-ui/core/styles/withStyles";
...
export default withStyles(styles)(Users);
Now I started to use i18next to use internationalization in my project but it want me to export my component like this:
export default translate("common")(Users);
The question is how can I satisfy both? How can I export with withStyles and translate?
Any help is appreciated
Both of those pieces of code produce a new component, so you can feed the result of one into the other. Done in one line, it would look like this:
export default withStyles(styles)(translate("common")(Users));
Or if it makes it easier to follow, here it is split on two lines.
const TranslatedUsers = translate("common")(Users);
export default withStyles(styles)(TranslatedUsers);
The purpose of higher-order components is to provide a way for components to be efficiently composed:
export default translate("common")(
withStyles(styles)(Users)
);
It can be flattened with composition helpers, e.g. recompose:
import { compose } from 'recompose'
export default compose(
translate("common"),
withStyles(styles)
)(Users);
I'm using react-komposer to wrap React components with a data fetching wrapper.
It is very basic and I'd want to wrap multiple components in Meteor. But I can't figure out what the export pattern is?
Here is what I have (and gives me an "Unexpected Token" error - probably obvious if you understand this well!):
// myContainer.jsx
import Component1 from './Component1.jsx';
import Component2 from './Component2.jsx';
function composer(props, onData) {
if (Meteor.subscribe('SingleTodoLists').ready()) {
const todoList = todoLists.find({}).fetch();
onData(null, { todoList });
}
}
export composeWithTracker(composer, Loading)(Component1);
export composeWithTracker(composer, Loading)(Component2);
And I'd like to import them like this:
import { Component1, Component2 } from './myContainer.jsx';
This wrapper syntax is not really clear for me, so I'm unsure about what to try. Playing with export default and other variations yielded no result so far.
If you don't use default exports, you need to name the things you export:
export const TrackedComponent1 = composeWithTracker(composer, Loading)(Component1);
export const TrackedComponent2 = composeWithTracker(composer, Loading)(Component2);
If you use default export instead you can omit the name, e.g.
export default composeWithTracker(composer, Loading)(Component1);
But you can only define one default export per module
See the documentation for the ES6 export syntax: https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export
Update:
If you want to keep the original export names:
import _Component1 from './Component1.jsx';
import _Component2 from './Component2.jsx';
//... you code here
export composeWithTracker(composer, Loading)(_Component1);
export composeWithTracker(composer, Loading)(_Component2);
Because Component1.jsx uses a default exports, when you import it you can rename it as you want (e.g. _Component1, UntrackedComponent1, ...). Without a default export, you could have used import { Component1 } as _Component1 instead.