How to disable scroll on touch? - javascript

I have a component in react on which touchmove event should be disabled. I have tried the following but it does not work.
parentRef.current.addEventListener("touchMove", e => e.preventDefault(), false)

You can simply use the touch-action property in your CSS file to remove the scroll event from your html body or an element. Add the below code in your code.
touch-action: none;
-ms-touch-action: none;

You can check if this device has innerWidth below certain pixels then set overflow:hidden and height & width to 100vh & 100vw respectively to the parentRef in useEffect

To prevent scrolling using CSS on React rendered components, we can set the overflow CSS property to hidden with JavaScript.
For instance, we write:
import React, { useEffect } from "react";
export default function App() {
useEffect(() => {
document.body.style.overflow = "hidden";
}, []);
return <div>hello world</div>;
}
to set the overflow CSS of the body element to hidden when the component mounts with:
document.body.style.overflow = "hidden";
The useEffect callback only runs when the component mounts since we passed in an empty array as the 2nd argument of useEffect.

Related

Overriding style in different media size in React js

I am setting style for div element inline - it is a dynamically caluclated value in React component:
<div className={s.Tag} style={{ fontSize: `${newSize}px` }}></div>
However in module CSS I need to set this to different size:
.Tag {
font-size: 12px !important;
}
But in for certain screen sizes (custom-media) I want to use this style that is set inline for the font-size. I tried the following approach but it won't use the inline style from the div element itself
#media (min-width: 1366px) {
.Tag {
font-size: unset !important;
}
}
How can I reset the css style to use the inline style for certain media queries?
you should propably try to get rid of the !important keywords. it will override ALL previous styling rules for that specific property. unset on the other hand makes your div inherit the font-size from it's parent. and since it's !important it has precedence over the style attribute afaik.
a possible Solution in your component could be something like useEffect (get's executed on render) and useRef (creates a reference to the dom node) to then set a css custom property on that div.
const your_component = () => {
const ref = useRef(null);
useEffect(()=>{
ref.current?.setProperty('--size-font', `${newSize}px`);
})
return <div className={s.Tag} ref={ref}></div>
}
This will set a css custom property on your div when the component renders.
in your css you could then do:
#media (min-width: 1366px) {
.Tag {
font-size: var(--size-font);
}
}

How to properly make animation/transition in react.js

I want to smoothly resize a DIV with onClick event. But transition doesn't work. onClick just changes the style without animation.
App.js
import React, { useState } from 'react'
import './App.scss';
function App() {
const [clicked, setClicked] = useState(-1)
return (
<div
className={clicked === -1 ? "app" : "app__clicked"}
onClick={() => setClicked(0)}>
div clicked {clicked}
</div>
);
}
export default App;
App.scss
.app {
background-color: red;
transition: width 3s;
&__clicked {
background-color: blue;
width: 100px;
}
}
I think I'm doing something wrong with SCSS.
As can be seen here, your SASS rules will result in two different css classes which you toggle between when assigning a className prop to your div.
The second class is app__clicked and it has no transition property which is why the transition doesn't work. It also doesn't work because, as indicated in the comments, you don't have an initial width on the div, so there is nothing to transition between. By moving the transition property to the app_clicked class and setting width to 100% in the initial state, you will have a working example.
As an advice when doing transitions manually, use a base class which has the transition property set and then toggle the other state by means of other classes (or inline with style) to make sure that the element always has the transition property set. Like this:
<div className={ `app ${clicked === -1 ? "before" : "after"}`}>
div clicked {clicked}
</div>
or
<div className={ "app" } style={{"width": clicked === -1 ? "100%" : "100px"}}>
div clicked {clicked}
</div>
Finally, you might wanna have a look at react-transition-group where transitions with React components is shown. However, you might think that this brings nothing new to the table and that it is too verbose. But it's good to know about and it might have its use cases.
Here is a sandbox with all of the above examples and an example with the CSSTransition component from react-transition-group: Sandbox

Possible to use CSS transitions with textarea rows value?

In all the years I've been developing websites this situation has never cropped up before and I'm not sure that what I'm attempting to do is even possible.
I have a React component with a textarea. It's initial state is rendered with a height of 1 row like this :
state = {
rows: 1
}
...
<textarea
...
rows={this.state.rows ? this.state.rows : 1}
onFocus={this.onFocus}
...
/>
The onFocus function changes the rows state to 5, thereby expanding the textarea.
This works perfectly, but I'm now trying to add CSS transitions to the textarea so it expands nicely instead of just instantly expanding.
Everything I've tried doesn't work, for example :
textarea#content {
transition: all 2s ease-in-out;
}
...so my question is - is it not possible to use CSS transitions in this way? I did some googling and couldn't find any answers which leads me to believe that it isn't, but I just want to make sure before I set about achieving this another way.
Can't say how React might be involved here, but for a transition to work, the CSS property being transitioned must have a default value set for it. You are indirectly affecting the height property by changing the rows, but you are not actually specifying that you want the height to change, so you can't transition the height if you are only indirectly changing it. Also, there is no CSS rows property, so no luck on transitioning that either.
The solution is to not set the height indirectly with rows in the first place. Set the height directly and set a default value for height in the CSS.
And, you really don't even need JavaScript to do this:
textarea {
height:1em; /* Initial value required for transitions to work */
transition:height 1s ease-in-out; /* configure the transition*/
}
/* Style to be applied automatically when the textarea recievs the focus */
textarea:focus {
height:5em; /* A change in this property will trigger the transition */
}
<textarea></textarea>

React element width animation

In my React based application I'm trying to perform a simple css3 width transition like:
.foo {
transition: width 1s ease-in-out;
}
what I want to do is set a style inside an element in the react component which is "width: xx%" and the animate it from 0% to xx%. Since the element when rendered already has this property the animation is not working. I've looked into the "ReactCSSTransitionGroup" but did not come closer to a solution. I started messing around with setTimeOut to set the style attribute after the component was rendered but it felt really messy and "hackish". Could someone point me in the right direction?
If you are trying to animate the component after it has been rendered (from 0 to n%) you can do it by calling setState in componentDidMount. As browsers are not rerendering stuff that has changed in the same animation frame but merge changes and render the end result, you'll need to wrap it in requestAnimationFrame
I explained it throughly in this blog post.
Code will look like this:
export default class AnimateMe extends Component {
state = {
width: 0
};
componentDidMount() {
requestAnimationFrame(() => {
this.setState({ width: "75%" });
});
}
render() {
return (
<div style={{ width: this.state.width }}>
Animate my width
</div>
);
}
}
I made a working example:
https://codesandbox.io/s/7z1j794oy1
Hope that helps!

Transition component Vuejs - Not working - Differences between inner and outer

EDIT Simplify the question
http://jsfiddle.net/bf830qoq/
Why the transition in that minimalist example does not work? (It mimics the real case in my code)
Former post
I would like to apply a transition on a custom component in VueJs 2, depending on v-if condition.
I tried to put the transition inner the component loading :
Parent component
<loading v-if="shared.loading"></loading>
Loading.vue
<template>
<transition name="slide-fade">
<div class="loading-container">
<div class="container-no-text">
<div class="title-no">Loading</div>
</div>
</div>
</transition>
</template>
<script>
import Store from '../store.js'
export default{
data () {
return {
shared: Store.state,
}
},
}
</script>
<style>
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for <2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
</style>
It simply does not work, the login disappears without any animation.
I tried to mimic the situation with JSFiddle :
Outer transition : http://jsfiddle.net/0v0wyLv0/ WORKING
Inner transition : http://jsfiddle.net/jpcays2b/ NOT WORKING
Here are the questions:
Why the second JSFiddle does not work (the inner one)?
Why on my code the "outer" does not work?
How can I make the loading component disappear smoothly?
Example which is working
https://jsfiddle.net/er3tjyh0/
Thank you
As par the implementation of transition in vue.js, transition wrapper component allows you to add entering/leaving transitions for any element or component in the following contexts:
Conditional rendering (using v-if)
Conditional display (using v-show)
Dynamic components
Component root nodes
From the docs:
When an element wrapped in a transition component is inserted or removed, this is what happens:
Vue will automatically sniff whether the target element has CSS transitions or animations applied. If it does, CSS transition classes will be added/removed at appropriate timings.
If the transition component provided JavaScript hooks, these hooks will be called at appropriate timings.
If no CSS transitions/animations are detected and no JavaScript hooks are provided, the DOM operations for insertion and/or removal will be executed immediately on next frame (Note: this is a browser animation frame, different from Vue’s concept of nextTick).
That's why transition will only work, when it is wrapping the v-if and not when it is inside, thats how it is implemented.

Categories