I have a project in drive C and I need a component in some other project in some other drive D. How do I proceed?
I have a website already made without ReactJS but now I need React as it will make my work easier so I'm integrating the components this way.
Can we import components in a non-react app like this?
below is my written code
'use strict';
import App from '../../../../'; //Area of issue
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
return e(
// <App />
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
}
}
const domContainer = document.querySelector('#map');
ReactDOM.render(e(LikeButton), domContainer);
Yes, you can import your components from one project to another irrespective of your new project location. It's just that your project might require a little restructuring and then has to be transpiled into a ES5 package, bundled and imported into other projects like a npm package.
you can also publish it to the npm repository online and install it as a dependency in the project you want. You just need to take care of the imports and exports really well.
So, here is the basic idea..
use babel and webpack to transpile your react project and bundle into a npm package.
eg.
babel Path_of_your_c_drive_project --out-dir output_folder_path
--copy-files
Copy that npm package from the output folder and paste it in the node_modules of the new project, and then add it is as a dependency in package.json of your new project.
Import the components in the js files wherever you require in the new project, just the same way you import other packages and use them.
You might face a lot of "not found errors" if you don't give the paths correctly at all the imports and exports in the above steps.
Sadly, that is not possible.
Just store the components on the same drive, shouldn't be that much of a hassle.
Create a react project. Implement all the react components inside that with your required customizations. Then instead of directly rendering, export a function to render those components to the element reference you pass. Then build it and include the built js file in your project. Follow the links to get a better idea:
react-micro-frontends
is-it-possible-to-export-react-component-as-function-in-non-react-project
using-react-components-in-non-react-websites
add-react-to-a-website
Related
I have two libraries of Stencil JS web components, library-a and library-b. These are not apps, just separate npm packages of components.
I would like to use some of the components from library-a inside library-b. How do I import components from A into B?
The StencilJS docs offer some import instructions but don't cover this particular use case.
Basically all you have to do is npm install (or npm link) the project and import it.
As far as I know there are two places you can include the import:
Inside a global app.ts which is configured as a globalScript in stencil.config.ts.
Inside the root component.
In your case the second option probably won't work since component libraries usually don't have a root component.
Import inside app.ts:
First, create a global script and configure it in your stencil.config.ts:
export const config: Config = {
// ...
globalScript: 'src/global/app.ts',
};
Then add the import inside that file. Example for Ionic Framework:
import '#ionic/core';
Now you can use the components just like any other HTML element.
I am building a React component library which contains some translations, but I want these translations to be provided by the user of my package.
The reason for this is that these translations should be customizable, and I don't want to include every possible language in this package.
So what I'd like to achieve is to use useTranslations inside my component library like this:
import React from 'react';
import { useTranslation } from 'react-i18next';
const MyComponent = () => {
const { t } = useTranslation();
return <div>{t('helloWorld')}</div>;
};
And somehow the 'helloWorld' translations should be configurable by the user of the library.
Is there any way to achieve this?
Apparently this was caused by yarn link using two versions of react-i18next.
To solve this I've configured my app to use the react-i18next version of my package:
cd my-package/node_modules/react-i18next
yarn link
cd my-app
yarn link react-i18next
Now my package uses the i18next instance configured in my app.
I have some reusable React components published to NPM, that I am installing and using within my React application. Is it possible for me to set an alias in my React app, that can be used within these NPM components? For example, I want to allow the use of a folder common, which is within my React App, within the React components. So if I do this in my React components, it should work
import someVal from 'common';
I am bundling these React components with Webpack, and sending down the transpiled, bundled version for use within the React application. I tried setting the alias the regular way within the React app webpack config (by setting resolve.alias), but it does not work. Can this be done? Or am I approaching this incorrectly? Any suggestions would be great, thanks!
Edit: So the React components from NPM are within my node_modules folder, and it is already bundled up via it's own Webpack config. I then run these components through my React application Webpack config as well (I'm whitelisting the folder), in the hopes that the new common alias will be added there. But no luck. I keep getting a
someVal is undefined error.
My common file has the following: Ignore the logic for now (I'm only posting a part of the code)
import _myClass from '../components/MyClass';
const myClass = _myClass; // Other things are done to it
export default myClass;
In my React components Webpack bundle file (after I fixed the default import statement)
/* harmony import */ var common__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! common */ "./src/common/index.js");
...
return common__WEBPACK_IMPORTED_MODULE_25__["default"].myFunction({
...
});
This still seems to be looking for common within the React components package, and not within the React app package that I am trying to use this in.
The Glimmer website states:
Just drop your Glimmer components into an Ember app. You won’t need to change a thing.
I’ve been following the official Ember quick start tutorial. I replaced the contents of the generated people-list.js component with this:
import Component from '#glimmer/component';
export default class PeopleList extends Component {
}
and I get an error in the browser console stating that #glimmer/component is undefined. After I run yarn add #glimmer/component to add the dependency, I get a new error from Broccoli.
Additionally, whenever I use '#' before a variable in the people-list.hbs template, the template fails to compile. How do I get the Glimmer component to work in my Ember app?
To use glimmer in an ember app today (May 1st, 2019),
yarn add --dev #glimmer/component#beta
then
import Component from '#glimmer/component';
import { tracked } from '#glimmer/tracking';
export default class MyComponent extends Component {
#tracked number = 0;
increment() {
this.number++;
}
}
to see this in action, take a look at a fresh Octane App: https://github.com/ember-cli/ember-octane-blueprint
Currently you can't use it for existing ember app. but you can try it brand new app. By installing ember new my-glimmer-app -b https://github.com/glimmerjs/glimmer-blueprint.git
If you go with yarn global add ember-cli/ember-cli this way then you need to uninstall existing ember-cli (npm uninstall -g ember-cli)
I want to use the OpenSeadragon library in my Meteor app. As Meteor 1.3 provides support for npm modules, I have installed it via npm using meteor npm install openseadragon.
But now I am not sure how to user it. The OpenSeadragon docs only provides an example using the script tag.
The meteor docs tell us to use import like import moment from 'moment';. But how do I import openseadragon as I am pretty sure it doesn't use ES6 modules and doesn't export anything.
How can I use it using the npm import without loading the openseadragon.js as global for whole app?
The project's (poorly documented) API page states that
OpenSeadragon will also return an AMD module when required with a loader like Require.js.
Therefore, inside a client script, you can simply
import 'openseadragon'; // load globally
and it should give you the module constructor
Now, depending on what you are using, you may initialize your container from that constructor. For React container, this would look something like this :
import React, { Component } from 'react';
import { Random } from 'meteor/random';
import 'openseadragon'; // OpenSeadragon on global scope
export default class OpenSeedragonComponent extends Component {
constructor(props) {
super(props);
this.state = {
options: {
id: Random.id(), // container unique name
// other options here...
}
};
}
componentDidMount() {
this.initialiseWidgets();
}
componentDidUpdate() {
this.initialiseWidgets();
}
initialiseWidgets() {
this.viewer = OpenSeadragon(this.state.options);
}
render() {
return (
<div id={ this.state.options.id }
width={ this.props.width || '800px' }
height={ this.props.height || '600px' }
>
</div>
);
}
};
Note: at the moment of this writing, you will get an error when loading the .map file. Just ignore it, or open an issue with the project maintainer so he properly integrate the project with Meteor. Perhaps someone will write a react / meteor package wrapper for it...
A JS lib doesn't have to specifically use ES6 export keyword to expose symbols, as a matter of fact npm modules are still using CommonJS module.exports in their vast majority because even though package authors write their code in ES6 they publish them to npm using Babel.
In this specific case, you need to globally import the OpenSeadragon lib using import 'openseadragon'; somewhere in your client/ folder.
Then it will be available on window.OpenSeadragon.
Since the nice Yanick Rochon's answer does not seem to work in your case, note that you should still be able to load your library the "old fashion" way, using the [project_root]/client/compatibility/ special folder.
Any library in that folder will not be loaded in an independent scope by Meteor, but rather loaded "as is" like if it were through a classic <script> tag.
Then your OpenSeadragon object should become available on global scope.
As a side note, if you need simple image navigation and not the OpenSeadragon advanced features, you might be interested in trying Leaflet. It is lighter-weight but very stable and well maintained.