Develop Reference

How to make a container width bigger in React

I want to create an event for my button that is in in my AsideMenu component that take the current width and if it's equal to 5vw than it will make it to 10vw else it will put it at 5vw and it must overlap the div named home. This is the code:
Thank you
I know how to do it with it vanilla javascript but not in react
import React from 'react'
import AsideMenu from '../components/AsideMenu'
import './Home.css'
const Home = (props) => {
return (
<div className='assemble'>
<div >
<AsideMenu />
</div>
<div className='home'>
<h1>Home</h1>
</div>
</div>
)
}
export default Home```

You can use a useRef hook and get the current width. This video will explain it better for you. In case you get stuck, feel free to reach out. After using the useRef, you can then use a ternery statement in the return statement to actualize the code.

Grommet TextArea exports multiline text as a single line in the image

I want to export Grommet TextArea as an image. The following code works if there is just a single line of text. But if I adjust the TextArea component in a way to make the text fill multiple lines, this won't be exported in the output image.
This is how it looks (1 - is the page which contains the multiline TextArea I want to export, 2 - the exported TextArea, containing just a single line of text)
Seems like I'm just missing something about HTML canvas. Or maybe there is some property in Grommet TextArea which helps with changing that behavior?
App.js:
import React, { Component } from "react";
import { TextArea } from "grommet";
import "./styles.css";
import { exportComponentAsPNG } from "react-component-export-image";
export default class App extends Component {
constructor(props) {
super(props);
this.textRef = React.createRef();
this.state = { text: "" };
}
render() {
const { text } = this.state;
return (
<div className="App">
<TextArea
ref={this.textRef}
value={text}
onChange={(event) => this.setState({ text: event.target.value })}
/>
<button onClick={() => exportComponentAsPNG(this.textRef)}>
Click
</button>
</div>
);
}
}
index.js:
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
index.html:
<div id="root"></div>

I think that the issue lay in the way the image is being exported. I created a quick test using only 'textarea' of HTML instead of the Grommet TextArea component and the issue still occurs:
I've verified that the behavior you've described is the expected behavior from react-component-export-image package by running the HTML example on their demo app, and it seems that this is their core functionality behavior. You might want to file an enhancement request that asks to support multiline screenshots. Here is the screenshot example from running the HTML example on their demo app:

The issue came out from html2canvas library, which is a core of react-component-export-image.
There are a couple of threads for this issue in the html2canvas community, including this one (the main one, I guess):
https://github.com/niklasvh/html2canvas/issues/2008
The best solution (which also helped in my case) is to use contenteditable div instead of textarea element

How can I add a react Component To the DOM with jquery?

This is prob a super easy question but, I want to add components to a grid with react and jquery.
gridGame is a black 100px by 100px square and I want to add items into it. Im using rows (a variable) witch is a number from 1-9 to and sumbing it in to the gridGame-${rows} as seen here,so it can auto update the correct row to join. value should be: gridGame-${row} (what ever number row is from 1-9) and then I want to add a component inside gridGame called <Test /.> (witch is declared up-top in unseen parts of the code).
The function below has jquery that I thought would work in this situation:
function = (rows) => {
console.log(`joining ${rows}`)
let value= $(`#gridGame-${rows}`);
value.append("<Test />");
value.css("background-color", 'brown');
$(".create-coinflip-box").css("display", "none");
}
The css background change works but the value.append does not display the react component.
Here is the React Component inside the <Test /.>:
import React from 'react';
import StatusIcon from './img/image.png';
import Player1Icon from './img/image.png'
class newGame extends React.Component {
render() {
return(
<div>
HELLO
</div>
);
}
}
export default newGame;
I honestly have 0 idea on how this doesn't work.
Thanks for the help :)

This answer was from David in the comments. The problem for me was I was trying to render a component through a button and not the actual render its self.
The solution is to instead make the button change the state witch Updates the React DOM. Then just have a if statement that checks the state then display the component.
His comment explains much better and fixed the problem for me.

Get Width Of An Element Inside A Dumb React Component

So I want to know the width of an element in react dumb component.
import React from 'react';
import moment from 'moment';
const Message = ({ ...props }) => (
<article>
<section> <!-- This is the element I want to find width of -->
<h2>{name}</h2>
<p>{description}</p>
</section>
<p>{moment(created_at).format("h:mm a")}</p>
</article>
);
export default Message;
I want to find the width of the section element, so that I can do some UI changes based on that width. The thing to note here is that this Message component is being mapped in an array. And for every Message component that get's rendered I want to find the width of the section element in each of that component.
I did some research and I found an implementation in a smart component which was like this.
class MyComponent extends Component {
componentDidMount () {
console.log(this.myInput.offsetWidth)
}
render () {
<div ref={input => {this.myInput = input}}>some elem</div>
}
}
Can I do similar like this but without using this or without using state, just plain old vanilla JavaScript.
Any kind of help or direction would be highly appreciated, Cheers :)

Modify or override material-ui button css

I have a material UI RaisedButton and I want to change the background color.
I have this:
const style = {
backgroundColor: 'green'
};
export default class CreateLinksave extends React.Component {
<RaisedButton
label="Continue"
style={style}/>
}
but when I refresh the page the material-ui style remains, so how can I override the style?
A second question is, how to avoid doing inline styling? I was thinking on create a js file with constants with the styles I need for my components, import it and access to my styles that way, is that a good approach?
I'm new to React so some help would be nice...
Regards.

You can override the style by passing in the attribute. See the docs for which attributes are supported.
creating a JS file (or multiple files) with your styling sound like a good idea, as long as the rules are simple. if you find yourself merging & overriding styles it would be easier just keeping the style in the component file.
You'll end up with something like
import {green} from './my-style/colors';
...
<RaisedButton label="change min" backgroundColor={green} />

If you are using Material UI you should use jss as seen in their documentation. And use the withStyles HOC. Actual link https://material-ui.com/customization/css-in-js/
Here is an example:
import { withStyles } from '#material-ui/core/styles';
const style = {
back: {
background: green,
},
};
class CreateLinksave extends React.Component {
{classes} = this.props;
<RaisedButton
label="Continue"
style={classes.back}/>
}
export default withStyles(styles)(CreateLinksave );
I think you should check the documentation to have better and reusable components.