Develop Reference

styling google-map-react map

I am building a map with google-map-react and trying to style it with no luck. I am using the documentation here: https://github.com/google-map-react/google-map-react/blob/master/API.md and adding styles via a prop called options like it says but I am not seeing any styles being applied.
Here is my code:
const createMapOptions = () => {
return {
styles: [{stylers: [{'saturation': -100}, {'gamma': 0.2}, {'lightness': 4}, {'visibility': 'on'}]}]
}
}
const Map = ({center, children, onGoogleApiLoaded, useGoogleMapsApis, zoom}) => {
return (
<div className='h-100p w-100p'>
<GoogleMap
bootstrapURLKeys={{key: '...'}}
defaultCenter={center}
defaultZoom={zoom}
options={createMapOptions}
yesIWantToUseGoogleMapApiInternals={useGoogleMapsApis}
onGoogleApiLoaded={onGoogleApiLoaded}
>
{children}
</GoogleMap>
</div>
)
}
Any guidance on how to get ANY styling applied would be greatly appreciated.
Note - I am using a developer key, not sure if that could be why I am not seeing the styling?
Also Note - I do not want tips on react-google-maps a similar library, but not the same as google-map-react. Ive seen other google-map-react questions answered and up voted with people referring to react-google-maps.

Some times styling in react as difficult when you use packages. So the Best Way to do it is
Open Inspect Element in your browser
Select the Particular Element whose styling you want to modify.
Copy the class that is used in it already.
Make changes to the same css className in your own scss or css file and will modify.
Note : If nothing Happens Try using the !important in the property.

https://developers.google.com/maps/documentation/javascript/controls#ControlOptions
Use this as resource to change css for the package.
Screenshot from the the above resource

Apply motion to react component Framer-Motion

I know that I can apply motion directly to element/HTMLtag like this:
<motion.div>some content</div>
But how can I apply it to this?
<Comp />
Without wrapping it inside another HTML element, like in React-Transition-Group library.
Framer API provides Frame component, but it acts like permanent additional HTML element with own styling, and it is messing my layout.

If anyone comes to this page seeking for the solution of how to apply motion from Framer-Motion library to your React Component and not the direct DOM element like "div" or "span", here it is:
motion.custom()
Example of use:
import { Link } from "react-router-dom"
const MotionLink = motion.custom(Link)
return <MotionLink />
As for today it is not mentioned in the official documentation, or it is in someplace deep and hard to find.
I had found it in BUG reports here, there is a Codesanbox that illustrates my example, created by the person who reported a bug.

motion.custom was deprecated as of v4.0 in favour of motion(Component) or motion("Component").
Your code would simply look like this
const MotionComp = motion(Comp)
return <MotionComp>some content</MotionComp>

Without using any internal fuctions,
You just need to wrap it with any motion element:
<motion.div>
<Comp />
</motion.div>
You can notice such behavior across examples in the docs, like of Side Menu example.

Issue using multiple styles with Material-ui and Radium

I am trying to combine Radium and Material-ui. When I try to apply multiple styles on a single Material-ui component, no style is applied. So, for example, something like this produces no styling applied:
<MenuItem style={[styles.styleOne, styles.styleTwo]} >
Of course, if I do something like:
<MenuItem style={Object.assign({}, styles.styleOne, styles.styleTwo)} >
it works. Is there some way around it or this is the only way to use Radium for combining styles for a Material-ui component? And just to mention, Radium is properly set up, because applying array of styles on, for example, DIV element or works properly.
Also, I am open to any suggestion about styling a React project that uses Material-ui library. Thanks!

For material-ui components in react, we add styles using the className. If i have to add multiple styles in a material component then below are the methods:
Example 1:
<div className={`${style1} ${style2}`}>
Example 2:
import classNames from 'classnames';
<div className={classNames(classes.style1, classes.style2)} />
Specifically for your case (Radium):
What it's doing is merging 2 objects (style1 and style2) into a new anonymous object {} which is what you need to do.
You'll want to be careful when doing this however as you'll need to consider how you merge if both objects define the same key e.g. if style1 and style2 both define a height which do you use?
There's a long list of possible ways to do this on this stackoverflow thread http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically depending on the libraries you're using and your use case they each have their own pros and cons.

Instead of adding classnames, you can also use the clsx module that comes with Material UI and combine your style classes.
{/* using arrays */}
<MyComponent classes={clsx([classes.text, classes.title])} />
{/* using conditions */}
<div className={clsx(classes.root, {
[classes.base]: true,
[classes.closed]: !open,
[classes.open]: open
})]>
{props.children}
</div>
The Material UI Mini Variant Drawer example does a great job showing this module off.

Check out this fiddle: https://jsfiddle.net/Lxh5x2qr/
It uses the JSX spread (...) operator, which is a bit nicer syntax:
styleOne: {
background: 'blue',
color: 'red'
},
styleTwo: {
background: 'green'
},
... style={{...this.styleOne, ...this.styleTwo}} ...
Please notice the the order of object does matter, just like in Object.assign.
We should not forget that MenuItem is not a DOM element, so when we apply style to it, material-ui manipulates it before applying it to the underlying element, and probably this is the reason why using an array does not work.

Having trouble building a simple audio player in React using HTML5

I've recently started learning React and I'm trying to build a simple audio player. I'm currently using this example as a reference but it's built in one file
https://github.com/CezarLuiz0/react-cl-audio-player
The one I'm trying to make is done in a "React" way where the UI has reusable components but I'm having trouble separating my code into meaningful and working components. For example, if I try to move some of the rendering code from the parent component (AudioPlayer) into (PlayButton), the audio methods that is created on the mounting of the parent component suddenly becomes inaccessible to the child components.
Here is my code repo.
https://github.com/vincentchin/reactmusicplayer
It works now but I'd like to improve it. Also it'd be great if someone can point out huge flaws in this since I'm sure I've broken some rules or standards to coding in React.

You can access parent component's methods from a child component by passing the method as a prop, and then invoking it inside the child component.
For example (in the child component's render method):
<button onClick={this.props.methodFromTheParent}>Click me</button>
You can also pass arguments to these methods:
<button onClick={this.props.methodFromTheParent.bind(null, 'Hello')}>Click me</button>
Remember to pass in null instead of this as the first argument when binding values to a method belonging to a parent component.
I skimmed through your repo as well. You could clean up the AudioPlayer component a lot by putting the different elements into their own components.
The render method could look something like this:
render() {
return (
<div>
<PlayButton onClick={this.togglePlay} playing={this.state.playing} />
{!this.state.hidePlayer ?
(<Player
playerState={this.state}
togglePlay={this.togglePlay}
setProgress={this.setProgress}
...
/>) : null}
</div>
);
}
And then inside the newly-created Player component:
render() {
var pState = this.props.playerState; // Just to make this more readable
return (
<div className="player">
<PlayButton onClick={this.props.togglePlay} playing={pState.playing} />
<Timeline
currentTimeDisplay={pState.currentTimeDisplay}
setProgress={this.props.setProgress}
progress={pState.progress}
...
/>
<VolumeContainer
onMouseLeave={this.props.noShow}
setVolume={this.setVolume}
toggleMute={this.toggleMute}
...
/>
</div>
);
}
You can break the layout into as many nested components as is needed and makes sense.
Remember to actually add the onClick attribute inside the child components as well (<button onClick={this.props.onClick}>Play</button>).

Pass reference of a component to another one in ReactJS

Before anyone press eagerly the close button, I already have looked the following question: ReactJS Two components communicating. My problem is exactly the third scenario developped in the current accepted answer.
I am using ReactJS to build something with two components. For HTML reasons (and presentation), i want my two components to be at two different places of the page.
For the moment, I have the following pattern, corresponding to scenario #2:
FooForm = React.createClass({
...
});
FooList = React.createClass({
...
});
FooManager = React.createClass({
...
render: function () {
return (
<div>
<FooForm ref="form" manager={this} />
<FooList ref="list" />
</div>
);
}
});
React.render(
<FooManager someProp={value} />,
document.getElementById('foo')
);
This gives something like:
<div id="foo">
<form>Form generated with the render of FooForm</form>
<ul>List generated with the render of FooList</ul>
</div>
However, i would like to have something like this:
<div id="fooform">
<form>Form generated with the render of FooForm</form>
</div>
<!-- Some HTML + other controls. Whatever I want in fact -->
<div>...</div>
<div id="foolist">
<ul>List generated with the render of FooList</ul>
</div>
The problem here is: how can I keep a reference in each component? Or at least the link Form -> List?
I tried to create the FooList before and pass the reference to the current manager, but I get the following warning/error:
Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). Try rendering this component inside of a new top-level component which will hold the ref.
The documentation says you can attach events to link two components which do not have a parent-child relation. But I don't see how. Can someone give me some pointers?

The Less Simple Communication lesson from react-training has a good example of how you can move actions & state sideways to avoid having to create an explicit link between related components.
You don't need to jump into a full Flux implementation to get the benefit of this approach, but it's a good example to lead you up to Flux, should you eventually need it or something like it.
Note that this requires you to model the relationship between the components based on changing state rather than explicitly passing a reference to a component instance (as you're doing above) or a callback bound to the component managing the state.

This would be the perfect use-case for a Flux type architecture.
What you want is someone FooManager to be able to trigger state changes in both components. Or, in fact, having the different components trigger, through Actions, state changes in each other.
The Flux Todo-App Tutorial illustrates your use-case perfectly!
After this, then you'd have the choices of using Facebooks implementation of Flux or the other gazillion ones.
My personal favorite is Reflux