--How do I convert jQuery code in my React Component? - javascript

I need to update the CSS, and naturally I used jQuery, but I'm told not to use jQuery with React.
How would I do this properly. I can add more code if needed. I'm simply toggling the bottom border of a div
toggleMarker () {
if (this.state.previous && (this.state.current !== this.state.previous)) {
$('#nav_' + this.state.previous).css("border-bottom", '');
}
if (this.state.previous !== this.state.current) {
$('#nav_' + this.state.current).css("border-bottom", this.color);
}
this.setState({previous: this.state.current});
}

You can manipulate components style inline and you can give conditions according to state variables.
Example
render(){
return(
<div style={{ borderBottom: ((this.state.previous && (this.state.current !== this.state.previous)) ? 'none' : 1) }}>
// ...
</div>
)
}

When it comes to react, there are many ways to style a component including inline styles, define styles in css and import, using styled components and also using some small JS libraries e.g. classnames.
classnames supports any JS expression as class name to your HTML element. You can explore more using above link.
Just a simple example:
import styles from './yourcss.css'
import { classnames } from './classnames/bind'
const cx = classnames.bind(styles)
<div className={cx('divStyle')}>
</div>

I would suggest to have inline CSS with reference from variable in the state. consider this,
//define state
this.state={
toggleState : false}
//have toggler function
togglerFunction(){
var temp = this.state.toggleState
this.setState({
toggleState : !temp})
}
//in render you can have your element like this
render(){
...
//start of your element suppose a div
{this.state.toggleState == false ? <div style=
{{borderBottom:"YourValueForFalseHere"}}></div>:<div style=
{{borderBottom:"YourValueForTrueHere"}}></div>}
//...End of your element
...
}

Related

How can I add styling to an element in React?

In normal JavaScript you can grab an element by its id and add a style to it.
For example:
var element = document.getElementById("myElement");
element.style.backgroundColor = "#f5f5f5";
My question is how you can do this in react. Is it even possible to add this style?
In react im using onChange in a function outside the render(). I looked at the React DOM for styling and tried but since styling is in different function it will tell me how the variable is undefined.
this is my code:
ChangeImage() {
var imgStyles = {
backgroundColor: '#000',
padding: 5,
}
}
render() {
return (
<div className="class">
<div className="img-surround">
<img
src={this.state.file}
id="img"
style={imgStyles}/>
</div>
Everything is working except styles and I even tried putting in different functions
If you want to render the element with the style you can return the element like this in a react functional component:
return <div style={{backgroundColor: "#f5f5f5"}}></div>
If you want the element to only have that style in a certain condition you can use the useState hook in a react functional component:
const [myState, setMyState] = useState(false);
return <div style={myState && {backgroundColor: "f5f5f5"}}></div>
And you should change myState's value using setMyState however you like. For example:
const [myState, setMyState] = useState(false);
return <div onClick={() => myState ? setMyState(true) : setMyState(false)} style={myState && {backgroundColor: "f5f5f5"}}></div>
In this example whenever you click on the div the style is added or removed by case

How to detect whether an element inside a component is overflown in Vue?

I have a component ResultPill with a tooltip (implemented via vuikit) for the main container. The tooltip text is calculated by a getter function tooltip (I use vue-property-decorator) so the relevant bits are:
<template>
<div class="pill"
v-vk-tooltip="{ title: tooltip, duration: 0, cls: 'some-custom-class uk-active' }"
ref="container"
>
..some content goes here..
</div>
</template>
<script lang="ts">
#Component({ props: ... })
export default class ResultPill extends Vue {
...
get tooltip (): string { ..calcing tooltip here.. }
isContainerSqueezed (): boolean {
const container = this.$refs.container as HTMLElement | undefined;
if(!container) return false;
return container.scrollWidth != container.clientWidth;
}
...
</script>
<style lang="stylus" scoped>
.pill
white-space pre
overflow hidden
text-overflow ellipsis
...
</style>
Now I'm trying to add some content to the tooltip when the component is squeezed by the container's width and hence the overflow styles are applied. Using console, I can roughly check this using $0.scrollWidth == $0.clientWidth (where $0 is the selected element), but when I start tooltip implementation with
get tooltip (): string {
if(this.isContainerSqueezed())
return 'aha!'
I find that for many instances of my component this.$refs.container is undefined so isContainerSqueezed doesn't help really. Do I have to somehow set unique ref per component instance? Are there other problems with this approach? How can I check whether the element is overflown?
PS to check if the non-uniqueness of refs may affect the case, I've tried to add to the class a random id property:
containerId = 'ref' + Math.random();
and use it like this:
:ref="containerId"
>
....
const container = this.$refs[this.containerId] as HTMLElement | undefined;
but it didn't help: still tooltip isn't altered.
And even better, there's the $el property which I can use instead of refs, but that still doesn't help. Looks like the cause is this:
An important note about the ref registration timing: because the refs themselves are created as a result of the render function, you cannot access them on the initial render - they don’t exist yet! $refs is also non-reactive, therefore you should not attempt to use it in templates for data-binding.
(presumably the same is applicable to $el) So I have to somehow recalc tooltip on mount. This question looks like what I need, but the answer is not applicable for my case.
So, like I've mentioned in one of the edits, docs warn that $refs shouldn't be used for initial rendering since they are not defined at that time. So, I've made tooltip a property instead of a getter and calcuate it in mounted:
export default class ResultPill extends Vue {
...
tooltip = '';
calcTooltip () {
// specific logic here is not important, the important bit is this.isContainerSqueezed()
// works correctly at this point
this.tooltip = !this.isContainerSqueezed() ? this.mainTooltip :
this.label + (this.mainTooltip ? '\n\n' + this.mainTooltip : '');
}
get mainTooltip (): string { ..previously used calculation.. }
...
mounted () {
this.calcTooltip()
}
}

What does the className attribute mean in JSX?

I'm trying to figure out some sample JavaScript/React/Enzyme code and getting totally confused on what className attribute means in the JSX part of ReactTestObj below.
I know className in JSX is used because class is a reserved keyword in JavaScript, but I thought the className/class attribute in JSX/HTML was a reserved keyword for referencing a CSS class? If there is no CSS as in my example, what is the legal use of class/className other than referencing CSS classes?
import React from 'react';
export class ReactTestObj extends React.Component<Props, State> {
constructor(props) {
super(props);
}
render() {
return (
<div className={'outer'}>
<div className={'inner'}>
<span className={'prop'}>prop</span>
<span className={'state'}>state</span>
<button
className="activate"
onClick={function() {
}}>
{this.props.value}
</button>
</div>
</div>
);
}
}
and the sample test code for context:
import { mount, React, expect } from '../specHelper';
import { ReactTestObj } from '../../src/components/ReactTest';
describe('ReactTest', () => {
it('should have an outer div', function() {
const wrapper = mount(<ReactTestObj />);
expect(wrapper.find('.outer')).to.exist;
});
it('should have an inner div', function() {
const wrapper = mount(<ReactTestObj />);
expect(wrapper.find('.inner')).to.exist;
});
it('should have a prop', function() {
const wrapper = mount(<ReactTestObj />);
expect(wrapper.find('.prop')).to.exist;
});
it('should have a state and it should be set to 10', function() {
const wrapper = mount(<ReactTestObj />);
expect(wrapper.find('.state')).to.exist;
expect(wrapper.find('.state')).value('state');
});
className is used instead of class in JSX because class is a JavaScript keyword.
All JSX gets turned into vanilla JavaScript. If you wrote class it would try to make a JavaScript class and not make an element that has a class.
So, when you write react it looks like this.
const name = 'Maddie';
const element = <h1 className="myName">Hello, {name}</h1>;
Then something like babel will take that code and turn it into vanilla JavaScript:
var name = 'Maddie';
var element = React.createElement("h1", {
className: "myName"
}, "Hello, ", name);
In vanilla JavaScript className is used to assign classes because the class keyword makes a different type of class.
className is the javascript handler to define and read the html class of a node
those are mostly used to search the site for element that are in the same group (like all elements that are part of a list etc) and to define style properties through css for that group of elements

Getting HTML element by Id and switch its CSS through React

I have some files that load into my react components, which have HTML code.
As it is now, the pure HTML code renders just fine, however there is some 'hidden' code that appears whenever you click certain buttons in other parts of the application or on the text above (think of it like panels that expand when you click on it).
The HTML is hidden just using the good old <div id="someId" style="display:none">.
Anyway I am trying to get the correct panel to expand upon clicking their respective buttons.
So in theory, what I need to do is find the element by id, and switch it's display to block whenever needed, and then switch it back when the parent is clicked again.
Unfortunately I have no idea how to do this and so far have gotten nowhere. As it is now, I have access to the component's ids. What I want to know is how in the world can I access that and get to change whatever is rendering?
Create your function:
function element_do(my_element, what_to_do) {
document.getElementById(my_element).style.display = what_to_do;
}
and latter in code you can append wherever you want through javascript onclick or not depends what do you need:
element_do("someId", "none"); // to hide
element_do("someId", "block"); // to show
or create yourself toggle:
function toggle_element(element_id) {
var element = document.getElementById(element_id);
element.style.display = (element.style.display != 'none' ? 'none' : 'block' );
}
// and you can just call it
<button onClick="toggle_element('some_id')">toggle some element</button>
The react way to do it would be with states. Assuming that you know how to use states I'd do something like this:
class ShowHide extends React.Component {
constructor() {
super();
this.state = {myState: true};
this.onClick = this.onClick.bind(this)
}
onClick() {
this.setState({myState: !this.state.myState}) //set the opposite of true/false
}
render() {
const style = {myState ? "display: none" : "display:block"} //if myState is true/false it will set the style
return (<div>
<button onClick={this.onClick}>Click me to hide/show me </button>
<div id="myDiv" style={style}> Here you will hide/show div on click </div>
</div>)
}
}

Render css class in image tag in react

I am making an app in React, I hope to rotate and translate the image once clicked the button.
render: function() {
var imageSrc = this.props.imageSrc;
var rotate = this.props.rotate;
var translate = this.props.translate;
var opacity = this.props.opacity;
var scale = this.props.scale;
return (
<div>
<img src={imageSrc} tyle={{opacity: opacity? 0.5:1,height: scale? 600:300, width: scale? 800:400}}/>
<div>
<input type="file" onChange={this.handleChangeFile} />
</div>
</div>
);
}
});
I set the opacity and scale property in style tag, but I don't know how to add rotate and translate, since there is not html tag for them.
So i made a variable outside of JXS,
var imageRotate;
if({rotate}===true){
className='rotator'}
return (
<div>
<img src={imageSrc} style={{className={imageRotate}/>
<div>
but it doesn't work. i was wondering what is the best way to pass css into the image tag?
In a react way, I would advise to separate concerns:
make your before and after styling in css (and not use inline styles in react), and put the transform, rotate etc in the after-class.
in your react code, add a click handler to your <img>, which applies the new class to your <img> component
Example code (where you change class every single time you click) would look something like this:
class Application extends React.Component {
constructor(props) {
super(props);
this.state={ className: 'class1' }
}
handleClick() {
this.setState({
className: (this.state.className=='class1')? 'class2' : 'class1'
})
}
render() {
return <div>
<p className={this.state.className}
onClick={() => this.handleClick()}>
click me to change color
</p>
</div>;
}
}
In this example, class1 or class2 is applied to a <p> element, but the principle is the same.
Working codepen here.
Translating and rotating are part of the CSS transform property. You can set transform in the style pretty much like any other CSS.
For example, to work off the base React JSfiddle:
var Hello = React.createClass({
render: function() {
return <div style={{transform:"translate(10px, 10px) rotate(-15deg)"}}>Hello {this.props.name}</div>;
}
});
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);
See jsfiddle: https://jsfiddle.net/a02jkshm/

Categories

Resources