We Keep Coding

How to use THREE.js (and THREEx and AR.js) CDN in my react component?

I thought react is less pain than Angular for such projects, and you could still mix "plain" javascript into your project. So I have in my react project in index.html this script tags:
I try to integrate this example of AR.js into my react component.
<script src='libs/three/example/vendor/three.js/build/three.js'></script>
<!-- jsartookit -->
<script src="libs/three/vendor/jsartoolkit5/build/artoolkit.min.js"></script>
<script src='libs/three/vendor/jsartoolkit5/js/artoolkit.api.js'></script>
<!-- include threex.artoolkit -->
<script src="libs/three/src/threex/threex-artoolkitsource.js"></script>
<script src="libs/three/src/threex/threex-artoolkitcontext.js"></script>
<script src="libs/three//src/threex/threex-arbasecontrols.js"></script>
<script src="libs/three/src/threex/threex-armarkercontrols.js"></script>
<script>THREEx.ArToolkitContext.baseURL = '../'</script>
Now I want in my ARcomponent.js make use of this THREE and THREEx:
import React, { Component } from 'react'
export class ARcomponent extends Component {
componentDidMount() {
// init renderer
var renderer = new THREE.WebGLRenderer({
antialias : true,
alpha: true
});
//...
}
render() {
return (
<div className="canvas">
</div>
)
}
}
export default ARcomponent
but I get the error message that THREE and THREEx are undefined..
Line 200:20: 'THREE' is not defined no-undef
How can I use Three.js with AR.js (NOT with fiber! not with Aframe!) in my react project? Yes I tried npm install three - but where do I get THREEx and AR.js as npm packages?
Even when I get those errors and my app breaks - when I check on the F12 console THREE and THREEx are loaded.. maybe I need somehow wait a bit longer in my component with using THREE and THREEx?

AR.js in a React environment
AR.js not provide a npm package with ES6 standard yet but there is a PR #116 on the way to add this feature. In the meantime folow this instructions if you want to test:
import AR.js with npm
You need to manually write the import (in package.json) in this way:
"#ar-js-org/ar.js": "https://github.com/AR-js-org/AR.js.git#<GIT_COMMIT_HASH>"
where the <GIT_COMMIT_HASH> is the latest git commit hash (take it from the latest commit in the ES6 branch!)
Example code
I will not post the whole code, but consider that Ar.js is based on Three.js and the preferable way to load it, is in the ComponentDidMount:
import React from 'react'
import { ArToolkitProfile, ArToolkitSource, ArToolkitContext, ArMarkerControls} from 'arjs/three.js/build/ar-threex.js';
import * as THREE from 'three';
export default class ThreexComp extends React.Component {
componentDidMount() {
// your AR.js code here!
}
render() {
return (
<div
style={{ width: "800px", height: "800px" }}
ref={mount => { this.mount = mount}}
/>
)
}
}
You can take a look at this my testing example here: and you can also take in consideration this issue
Final considerations
Importing Ar.js as a npm package, with the ES6 standard, it will be the best way to import into React and similar frameworks. But it is still in devlopment,and could be some bugs. Anyway we think to merge in the dev branch soon and publish a first beta package.

Material UI styles not working in component (warning: several instances of `#material-ui/styles`)

I've created a stand-alone React component that uses the Material UI (4.8.3) library and published this to a private NPM package in order that it can be used in a range of apps.
The stand-alone component project works fine (I'm using Storybook to test the component), but when I publish and then import the component into a new React project (created using create-react-app) I get the warning:
It looks like there are several instances of `#material-ui/styles` initialized in this application. This may cause theme propagation issues, broken class names, specificity issues, and makes your application bigger without a good reason.
The component renders on the page as seen below, but without any theming applied:
When it is clicked, any theming on the main React App is removed (note the dark blue bar in the background behind the menu has lost its color):
I'm using the Material UI withStyles functionality to theme my component, which I guess is the problem as my main React app is also using this, but this is the recommended way to apply to style. Does it feel like I need to somehow inherit an instance of the theme from the main host App?
My component project was created using create-react-library and so is using Rollup (0.64.1) and babel (6.26.3).
Here is the component:
import React, {Component} from 'react'
import { withStyles } from '#material-ui/core/styles'
const styles = theme => ({
root: {
fontSize: '14px',
}
})
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
class MyComponent extends Component {
render() {
const { classes } = this.props
return (
<div className={classes.root}>Hello world</div>
)
}
}
export default withStyles(styles)(MyComponent)
Which is published to an NPM package and then imported into the main app using:
import React, { Component } from 'react'
import { MyComponent } from '#xxx/mycomponent'
const styles = theme => ({
root: {
display: "flex",
flexGrow: 1
}
});
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
// Class
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
class App extends Component {
//
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
render() {
//
const { classes } = this.props;
return (
<div className={classes.root}>
<MyComponent />
</div>
);
}
}
export default withRouter(withStyles(styles)(App))

I had the same issue, but I do not use StoryBook. This is the first link in Google, so I post my case here, as it might help.
This is the link on how to fix the alert, but it does not work for me. npm dedupe does nothing and I am unable to change config since I am using create-react-app.
So I did following:
Removed #material-ui/styles dependency from package.json
Ran npm i
Changed all import styles from '#material-ui/styles' to import styles from '#material-ui/core/styles'

I have an almost identical setup and ran into this exact issue when importing the components into a different project. I should mention that we're using webpack to build the app that's consuming the component. It was suggested to me to try the following in my webpackconfig:
module.exports = {
...
resolve: {
alias: {
"#material-ui/styles": require.resolve("#material-ui/styles")
}
}
}
This worked great for my case.
For reference: https://webpack.js.org/configuration/resolve/

You should link #material-ui/styles in your story book
so first need to npm link #material-ui/styles in your story book and than in your apps

Please try to install the below package. This helped resolve my issue.
npm i #mui/material

What is the best way to create component library for both React and Preact?

I'm currently working on a project which involved both React and Preact. I came across to this where I need to use same component for React and Preact.
Is it a good idea to put the component into npm library package. What are the possible way to create component library for both React and Preact? Looking forward to hear your ideas and discussions.
The code might look like as the following:
React Project: Home.js
import React from 'react'
import Fancy from 'fancy-component/react' // My <Fancy /> component library
class Home extends React.Component {
render() {
return (
<div>
{/* Other parts of the code run here*/}
<Fancy text='🦄' />
</div>
)
}
}
export default Home
Preact Project: AnswerPage.js
import { h, Component } from 'preact'
import Fancy from 'fancy-component/preact' // My <Fancy /> component library
class AnswerPage extends Component {
render() {
return (
// Other Preact codes run here again
<Fancy text='🚀 again' />
)
}
}
export default AnswerPage
Component library: fancy-component
const Fancy = ({ text = '' }) => (
<div>
<span>{`This is so Fancy ✨ ${text}`}</span>
</div>
)
export default Fancy

We did this very thing recently, and because we could not find much information regarding this online it involved quite a bit of trial and error. This is what we ended up with:
Folder Structure:
/apps
/mobile
/desktop
/shared
/components
With preact 10, preact-compat is built in so you don't have to worry having separate components - just use React as normal for the components in your shared folder and preact will automatically alias the imports correctly.
As far as aliasing goes, we added this into our preact.config.js so that we can import the components like #components/Date from the app directory
config.resolve.alias['#components'] = path.resolve(__dirname, '../../shared/components')
For the React app, the only way that I could make that work was to add the aliasing in the babel.config.js like so:
['module-resolver', {
alias: {
'#components': '../../shared/components'
}
}]
I hope that this helps someone else that might be stuck on this!

What is the correct way to use material-ui CSS?

I"m brand new to material-ui and react .. and I'm following this guide from material to
my customize the css .
When I try to model the example
I get following
Cannot read property 'prepareStyles' of undefined
I understand that the following is an object that controls the CSS const theme = createMuiTheme()
but does it control all of material UI components ?
Sorry if that doesn't make sense, but I'm just understand how can I apply styles to both the Button and AppBar
Does the following code tell material that all of the components on the theme use this palette?
const theme = createMuiTheme({
palette: {
primary: { main: purple[500] }, // Purple and green play nicely together.
secondary: { main: '#11cb5f' }, // This is just green.A700 as hex.
},
});
If so, how would I add a custom CSS rule to AppBar? Do I add the CSS to the object that gets return from const theme = createMuiTheme()
?
If someone could please take a look at my code pin and provide me an example to with styling my the Button and AppBar, I will really appreciate it

Thanks for sharing your codesandbox, it helped me understand the problem you are facing.
First of all you are using outdated material-ui package 0.20.x (very old), with latest core release 4.2.x. You cannot mix both packages.
To fix your problem you have to remove material-ui as dependency. Make sure you don't have any material-ui/* imports.
To get ThemeProvider to work you need to install another dependency.
npm install --save #material-ui/styles
// or if you use yarn
yarn add #material-ui/styles
Since 0.20 API has drastically changed. So be up to date following the docs.
Docs for material-ui are located here. Make sure docs points you to latest release. (See in upper right corner, current version is 4.2.1)
I've forked your pen, see working example

What version of React and material-ui are you using?
As of version 4.2.1...
A good example on how the themeprovider works is in the material-ui docs directly her https://material-ui.com/customization/themes/
If you go into the Palette API documentation you will see that when you set the primary and secondary color within your theme provider you are setting the tone for the entire application. For example, if you were to create a button and set the color to primary then you would receive the primary color for from the theme provider.
This is straight from material-ui ...
import React from 'react';
import { createMuiTheme } from '#material-ui/core/styles';
import { ThemeProvider } from '#material-ui/styles';
import { purple } from '#material-ui/core/colors';
import Button from '#material-ui/core/Button';
const theme = createMuiTheme({
palette: {
primary: { main: purple[500] }, // Purple and green play nicely together.
secondary: { main: '#11cb5f' }, // This is just green.A700 as hex.
},
});
export default function Palette() {
return (
<ThemeProvider theme={theme}>
<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
</ThemeProvider>
);
}
When it comes to specific styling for each component, there are multiple ways that this can be done. I will use AppBar as an example. Following its API documentation found here you can set the color directly through common css/scss, you can use the overrides, or you can use the primary/secondary colors created in your theme provider.
Does the following code tell material that all of the components on the theme use this palette?
The answer is, it can, but you do not have to use it. Material-UI is a great tool for creating stylistic components with ease. They have came a long way over the last two years to make component customization easier and easier. The overrides are a great example of that. Most material-ui components are built on other material-ui components. Which can cause difficulty with styling. But with the new override feature you can easily override the child components. Documentation on overrides
Hope this helps!

How to inject JavaScript in React Native?

I am developing a react native app. I am super confused that how to inject javascript code in react native. Though I am struggling somehow to work with react native but the thing is sometimes I need to inject some javascript code in my react native or say the homescreen.js type files, but I somehow end up into a syntax error. For example:
I am trying to implement this in a stylesheet.
const styles = Stylesheet.create({
//some styles
viewStyle:{
Platform.select({
ios:{
marginTop:2,
},
android:{
marginTop:3
}
});
}
//some styles
});
But it just does not work! it doesn't work even when I apply ...Platform instead of Platform.
**Note: I have import {Platform} from 'react-native'
My version is 0.57.something, but what I want to know is what is the syntax to implement javascript in these files. Just like for example in PHP we have the following:
<?php
//your logic
for(something){
?>
<View></View>
<?php
}
?>
Similarly for other languages we have something like the <% %>, {{ }} tags but what should I use in React Native. I always end up with a syntax error.
So my questions are, can anyone help me understand what the restriction is within React Native and where I can use and should not use tags? And if tags are available what are they?
I am super confused and was unable to find a similar question like this anywhere on Stack Overflow. I'd appreciate anyone's inputs, the more answers the more it will be helpful.

So I'm not sure what kind of structure you have set up but I'm going to assume you have a single file (lets call it homescreen.js) and you want to define styles for a component. I'm assuming you have already imported everything that's necessary (StyleSheet, Platform, View and Text from react-native, and the default export React from react).
So first, let's make the stylesheet. You almost have it correct above, you need the following:
const styles = Stylesheet.create({
viewStyle: Platform.select({
ios:{
marginTop:2,
},
android:{
marginTop:3
}
})
})
(You mention above that you're getting a syntax error, this is probably due to the semicolon in your stylesheet object.)
Now we need to create the React class for your HomeScreen component. Again, not sure of the context but you should be able to pull out the bits you need.
class HomeScreen extends React.Component {
render() {
return (
<View style={styles.viewStyle}>
<Text>I should have marginTop 2 on iOS and marginTop 3 on Android.</Text>
</View>
);
}
}