Develop Reference

How to make a React component reusable in terms of styling?

Consider the following input component with its own scss file:
import React from "react";
import "./InputBox.scss";
const InputBox = () => {
return (
<div>
<label for="fname">First name: </label>
<input className="input-box" type="text" id="fname" name="fname" />
</div>
);
};
export default InputBox;
.input-box {
background-color: blue;
}
import React from "react";
import InputBox from "./InputBox";
export default function App() {
return (
<div className="App">
<div>The blue input box</div>
<InputBox />
<div>The green input box</div>
<InputBox />
</div>
);
}
Working example here
The functionality is okay, my question is with the styling: say I want a green input box, it doesn't seem possible with the external SCSS file. I can pass a className as a props but I feel it's a overkill. I feel my component should not contain any style, and only apply style when using it. How can I style the same component differently?

depending on the project I usually pass a variant prop which will determine the element's styling, so for example you have a default styling for an input field but you do have so different variants of the input with its own unique styling. So all you can do is pass a variant which will add a modifier block to your class name.
default classname = 'input'
depending on the variant the entire class name should be something like 'input input--variant-name'
all default styling go to the 'input' class name while the variant makes the changes. I feel it isn't an overkill as it is much more organized this way and with a use of a scss and css variables together you make have a very organized project structure for your styling.

you can do it by using useRef hook,here is the live demo link:https://codesandbox.io/s/romantic-ride-j0hdp?file=/src/App.js
this way you wont be requiring any css file.

I tried to pass className as a prop and it worked, code here:
const InputBox = ({ color }) => {
return (
<div>
<label for="fname">First name: </label>
<input
className={"input-box-" + color}
type="text"
id="fname"
name="fname"
/>
</div>
);
};
.input-box {
&-blue {
background-color: blue;
}
&-green {
background-color: green;
}
}
export default function App() {
return (
<div className="App">
<div>The blue input box</div>
<InputBox color={"blue"} />
<div>The green input box</div>
<InputBox color={"green"} />
</div>
);
}
I can see a few problems already:
When design a component, should I consider all possible style changes and design them as props? If yes, then every time using the component requires writing all props, which is cumbersome. If no, adding a prop requires modifying the component.

how to change label color when input field is focus in react js

could you please tell me how to change label color when the input field is focused in react js I am using semantic UI
https://react.semantic-ui.com/collections/form/#types-form
here is my code
<Form>
<Form.Field>
<label>First Name</label>
<input placeholder="First Name" />
</Form.Field>
<Form.Field>
<Checkbox label="I agree to the Terms and Conditions" />
</Form.Field>
<Button type="submit">Submit</Button>
</Form>
https://codesandbox.io/s/semantic-ui-react-example-i6crv

You can actually use :focus-within selector of CSS to easily apply CSS.
div:focus-within applies CSS when any element is focussed inside your div. In your case, you can give a class to your input group — let's say input-group. And then use .input-group:focus-within label selector to style your label.
Check out the working code sandbox demo of your code.
All I did is added the following stylesheet and it worked.
.input-group:focus-within label {
color: red !important;
}

You can use react hooks (useState) to change color of the label:
Working Fork - https://codesandbox.io/s/semantic-ui-react-example-fwiz4
Just rewrite the component, include useState, and then use onFocus event inside the input field. Once it is focused, state hook will modify the focused state to true, which you can use to apply custom style or class. If you have more field, just add more state params, instead of one (focused in this example).
import React, {useState} from "react";
import { Button, Checkbox, Form } from "semantic-ui-react";
const FormExampleForm = () => {
const [focused, setFocused] = useState(false); // set false as initial value
return(
<Form>
<Form.Field>
<label style={{color: focused ? 'red' : ''}}>First Name</label>
<input placeholder="First Name" onFocus={() => setFocused(true)} />
</Form.Field>
<Form.Field>
<Checkbox label="I agree to the Terms and Conditions" />
</Form.Field>
<Button type="submit">Submit</Button>
</Form>
);
}
export default FormExampleForm;

Going to a section of a page using java script

I have a webpage with several components that looks like:
<div id='someId' ...... />
Manually it is possible to go to those sections using
<a href="#someId" ..... />
How, using es2015 or react or javascript, could be created a function to go to that <div> component ?

You could use the scrollIntoView function.
document.getElementById('someId').scrollIntoView();
React Example (CodeSandbox)
class App extends React.Component {
onClick = () => {
this.ref.scrollIntoView();
};
render() {
return (
<div>
<button onClick={this.onClick}>Scroll down</button>
<div style={{ height: 1000 }}>Hello CodeSandbox</div>
<div style={{ height: 1000 }} ref={ref => (this.ref = ref)}>
Scroll here
</div>
</div>
);
}
}

If you don't mind installing a 3rd party package, I would suggest trying react-scroll-into-view

React input focus event to display other component

I was read some tutorial about this. They told me should using ref to do that.
But It's very general.
Here is my problem:
Basically in Header component include NavBar, SearchBar and ResultSearch component.
const Header = () => {
return (
<header className="ss_header">
<Navbar />
<SearchBar />
<ResultSearch />
</header>
);
};
And In SearchBar component. Whenever I focused on input text. It emit an event and display ResultSearch component by any way (changing style, or ...).
class SearchBar extends Component{
render() {
return (
<div className="search_bar">
<section className="search">
<div className="sub_media container">
<form method="GET" action="" id="search_form">
<Icon icon="search" />
<span className="autocomplete">
<input
className="search_input"
autoCorrect="off"
autoComplete="off"
name="query"
type="text"
placeholder="Search for a movie, tv show, person..." />
</span>
</form>
</div>
</section>
</div>
);
}
}
Style in ResultSearch component. I was set display: none.
.results_search { display: none; }
I think ResultSearch will receive an event from SearchBar and set back display: block for ResultSearch component. Is possible?
How can I handle that?
My Code here: https://codesandbox.io/s/3xv8xnx3z5

only you should convert Header component like following:
class Header extends Component {
state = {
focus: false
};
handleInputFocus = () => {
this.setState({ focus: true });
};
handleInputBlur = () => {
this.setState({ focus: false });
};
render() {
return (
<header className="ss_header">
<SearchBar
onFocus={this.handleInputFocus}
onBlur={this.handleInputBlur}
/>
{this.state.focus ? <ResultSearch /> : null}
</header>
);
}
}
and also in SearchBar component add following attributes to your input:
onFocus={this.props.onFocus}
onBlur={this.props.onBlur}
also, you should remove your CSS about result box.
And, you can see the updated code on the following sandbox:
https://codesandbox.io/s/mmj46xkpo9

Still not sure what you're trying to achieve.
This is the way you can handle visibility of result of the search. Let me know if this isn't what you're looking for.
https://codesandbox.io/s/7jvz31xr66

React.JS onChange event not working with using unity-webgl

import {Unity} from 'react-unity-webgl';
...
handleChange(event) {
console.log(event.target.value);
}
render() {
<div>
...
<div>
<Unity src="WebGL.json" />
</div>
...
<div>
<input type="text" name="title" id="title" value={this.state.value} onChange={this.handleChange} />
</div>
...
</div>
}
Here onChange(Input) event was working well but after Unity integration it does not work at all. I tried with other input components but same result.

I solved this problem by myself and I posted the answer via below links.
Here are the answer for this question.