Having trouble parameterizing css such that animationSpeed is taken from props.
I would want to replace the .2s below with animationSpeed
transitions.css
.Anim-appear {
animation: .2s linear pageFadeIn, .2s linear pageSlideInLeft;
}
...
component.jsx
import '../css/transitions.css';
const PageAnimator = props => {
const animationSpeed = props.animationSpeed + 's' // How to use this to set animationSpeed in CSS?
}
I am having a lot of trouble doing this and was wondering how I could get this done.
Note: this value doesn't change. After we initialize the app it is a constant value. But we have several versions of the App that all have different configurations and animation speeds.
document.documentElement.style.setProperty('--animation-speed', sec);
That's how I accomplished it. It seems to work. : )
Thanks to:
How to change CSS root variable in React?
Related
I have a need to have some text scale in ways only SVG can as far as I could find. The text will change frequently so it also needs to adapt to that.
I'm making the app in react and would like to know how to calculate the bbox of an SVG (initially and every time it changes) before rendering it or at least without flickering / layout shift.
An example could be found here - the current issue is that it flicker. Everything else works fine more or less.
I've seen some other questions that are similar or nearly identical - however they do not have the requirement of changing text so it's possible to compute the bounding box in advance once or at least a one time flicker is not a big issue. Another question / thread also used a class component that supposedly updated the state at component mount but before render which as they claim does not cause a flicker but a lot has changed since then in react and in the example I tried the flicker is there.
The best compromise I've found so far is to just make the SVG's visibility hidden and measure the bbox of the text first and show it when done. Then every time the text changes measure again. Generally speaking this should not be too crazy in terms of jumping around or any other visual quirks but for best results you'd want to set a certain fixed size box for the SVG to fill up and not cause any layout shift.
import { useState, useEffect, useRef } from "react";
export type BBox = { x: number; y: number; width: number; height: number };
const makeViewBox = (bbox: BBox) => {
return `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`;
};
// Note that this component still sometimes jiggles around a bit
// and it is particularly noticable with nont monospaced fonts.
const ScalableSVGText = ({ text }: { text: string }) => {
// Reference to the SVG element, needed to take bbox measurements
// and adjust the SVG's viewBox
const ref = useRef<null | SVGSVGElement>(null);
// State is somewhat needed to force re-render - other methods
// can be used but whatever...
const [bbox, setbbox] = useState<null | BBox>(null);
// On initial mount & every time the text changes measure the
// bbox and update the state so the component re-renders
useEffect(() => {
if (ref.current) {
setbbox(ref.current.getBBox());
}
}, [text]);
return (
<svg
ref={ref}
width="100%"
height="100%"
viewBox={bbox ? makeViewBox(bbox) : ""}
style={{
// not strictly needed but makes it somwehat easier on the eyes
visibility: bbox ? "visible" : "hidden"
}}
>
<text>{text}</text>
</svg>
);
};
export default ScalableSVGText;
This has been asked several times but in my use case it's not working. I'm sure I'm missing something.
In a functional component I do:
const headerImg = {
backgroundImage: `http://localhost:1337${data.service.main_image.url}`
};
Then in a div I do the following:
<div className="bread-cumbs-area" style={headerImg}>
I'm attempting to use headerImg.backgroundImage as the background image but it's not displaying in my div. Any idea what I'm doing wrong?
Since you're setting the background image in CSS, you need to use the url() CSS function:
const headerImg = {
backgroundImage: `url('http://localhost:1337${data.service.main_image.url}')`
};
I'm trying to animate text in React by using scss (probably it doesn't matter). It doesn't work.
In SCSS file:
.animate {
animation: 3s linear 1s infinite alternate slidein;
}
Aplied on my text:
<h2 className="animate">Order is active.</h2>
Should I do something more?
Thanks for the answer!
You can use marquee:
<marquee behavior="slide" direction="down">Order is active.</marquee>
For more attributes: https://www.w3schools.in/html-tutorial/marquee-tag/
You have to use animation with #keyframe. #keyframe specifies what to do, animation when and how
https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation2.
Or you can use "transition" with additional class name
https://developer.mozilla.org/ru/docs/Web/CSS/transition
Somethin like this:
#scss
.main-class {
opacity: 1;
transition: 1s;
}
.hide-classname {
opacity: 0;
transition: 1s;
}
#jsx \ tsx
const [hide, setHide] = useState(false)
return(
<div className={`main-class ${hide ? 'hide-classname' : null}`}>
i will disappear
</div>
)
You can handle any kind of animation like low level to high level animation using this npm package built for react. react-transition-group.
mountOnEnter is one of the future available in it. which mount the component and start animate based on Boolean condition.
These animation states be will handled in class prefix from css followes.
entering
entered
exiting
exited
all kind of animation possibilities which are done in animate.css can be handled in above states.
You could try to checkout react-animated-text-builders. It's a small lib that supports some text animations. Nothing fancy, but maybe those animations are sufficient for your purposes:
<FloatingLettersTextBuilder
floatingSpeed={500}
lettersAppearanceDelay={250}
> Floating Letters
</FloatingLettersTextBuilder>
This will slide the text in from right to left.
Say I have a styled component, in index.jsx
import './index.less';
class Input extends React.Component {
...
}
and my index.less files looks:
.input{
color: #whiteColor;
}
This index.less has to work with the mixin.less that imported in the root project.
So my question is, even though I imported the mixin.less, it prompts variable #whiteColor not found. Any idea to solve this?
I have felt the same pain, why isn't my styled component resolving less variables?
The syntax is simple JavaScript, just do:
.input{
color: ${props => props.whiteColor};
// or
color: ${props => props.theme.whiteColor};
}
But, at my company, we had thousands of less components, and we really thought that the less syntax was cleaner and definitely faster to write. We developed Styless.
It is a babel plugin that parses less and generates javascript code. Add it to your .babelrc file.
{
"plugins": ["babel-plugin-styless"]
}
Then, we can do!!
const Input = styled.input`
#highlight: blue; // can be overwritten by theme or props
background: darken(#highlight, 5%); // make green darken by 5%
`;
Check here to see how to use the theme provider and load variable from your index.less!
You can try import the mixin.less in index.less
I have been trying the same than you.
But then I thought.. it is that what I really want? Because styled-components propose a different approach to having a modular structure for your styles.
https://www.styled-components.com/docs/advanced Check theming, is amazing powerful.
Because in styled components you define the variables with javascript.
And if you want color manipulation like less, sass, you can check https://github.com/erikras/styled-components-theme
Its like forgetting about less, and sass and moving it to a new style modules.
Still, if you want to keep your defined style classes, you can do that:
class MyComponent extends React.Component {
render() {
// Attach the passed-in className to the DOM node
return <div className={`some-global-class ${this.props.className}`} />;
}
}
Check the existing CSS usage from docs:
https://www.styled-components.com/docs/advanced#existing-css
I have to create some complex animations. It was cool to develop them with jQuery or VanillaJS, but I guess that I should choose another way with React. Google gave me ReactCSSTransitionGroup but it seems to be broken and unmaintained (according to this message: github.com). E.g. I can't make a delay before starting the animation.
I also found a library called React-motion but I'm not sure if it's actually a tool that I need. So I want to ask whether you can recommend me something about it. Probably I should use VanillaJS (using refs and other ReactDOM functions)? Or there is another approach to it? Thanks in advance.
The easiest way to do animations in React, or, in fact, anywhere on the web, is to use CSS Transitions.
CSS Transitions actually has nothing to do with React. Quoting MDN,
CSS Transitions is a module of CSS that lets you create
gradual transitions between the values of specific CSS properties. The
behavior of these transitions can be controlled by specifying their
timing function, duration, and other attributes.
Because CSS transitions is a pure CSS, they can be used in React applications, Angular, plain Javascript or even old-school server-rendered pages with no Javascript at all.
It is not the most versatile or powerful technique. But since in most cases the animations we want are pretty simple, why looking for something more complicated when a simple will do the job?
CSS Transitions are also well-supported by all major browsers with a notable exception of Opera Mini and IE below version 10.
CSS Transitions give us an ability to animate between the two CSS states. Let's say you want to animate opening and closing of a drawer (triggered by a click on a button). Let's assume we have a flex container around the drawer. When the drawer is opened, we want it to occupy 100% of the container width, therefore its max-width should be 100%. When it is closed, its width should be 0. We can create two CSS styles:
/* This CSS style is applied when the drawer is opened */
const openedStyle = {
maxWidth: '100%' /* max-with is 100% when the drawer is opened */,
};
/* This CSS style is applied when the drawer is closed */
const closedStyle = {
maxWidth: 0 /* max-width is 0 in the closed drawer */,
};
Then we handle opening / closing event apply one of those classes to the drawer object on opening / closing:
class Drawer extends React.Component {
state = {
opened: false // Initially search form is Closed
};
toggleOpened = () =>
// Toggle opened / closed state.
// Because we rely on the previous state, we need to use
// a functional setState form
// https://ozmoroz.com/2018/11/why-my-setstate-doesnt-work/
this.setState(state => ({ ...state, opened: !state.opened }));
render() {
const { opened } = this.state;
return (
<div className="drawer-container col-12 col-md-4">
<input
type="text"
className="drawer"
// Apply 'openedStyle' CSS class if the drawer is opened,
// and 'closedStyle' if the drawer is closed.
style={opened ? openedStyle : closedStyle}
/>
<button
type="button"
className="open-close-button btn btn-primary"
onClick={this.toggleOpened}
>
{opened ? 'Close' : 'Open'}
</button>
</div>
);
}
}
export default Drawer;
When we press the "Open / Close" button, the drawer will flip between 0 and 100% width, effectively opening and closing.
All we need now is to animate it.
For that we need a secret ingredient - a CSS transition property. All we need to do is to add the following style to the drawer:
/* This CSS style is applied when the drawer is opened */
const openedStyle = {
maxWidth: '100%' /* max-with is 100% when the drawer is opened */,
/* Upon transitioning to Open,
animate `max-width' for 0.5s*/
transition: 'max-width 0.5s'
};
/* This CSS style is applied when the drawer is closed */
const closedStyle = {
maxWidth: 0 /* max-width is 0 in the closed drawer */,
/* Upon transitioning to Closed,
animate `max-width' for 0.5s */
transition: 'max-width 0.5s'
};
Voilà! We've got our animation - upon clicking the button our drawer is now expanded and collapsed within half a second!
This is it in the nutshell, but there is more to it:
You can animate more than one CSS attribute with a CSS transition.
You can apply delay to transitionable properties, i.e. animate opacity first, and then animate width of the same element after 0.5 second delay.
You can apply various timing functions to transitions.
I wrote an expanded blog post explaining all the above: Painless React Animations via CSS Transitions.
Check out this easy to use and popular package:
https://www.npmjs.com/package/react-transition-group
Install:
npm install react-transition-group
Usage:
import { CSSTransition } from 'react-transition-group';
<CSSTransition
in={toShow} // boolean value passed via state/props to either mount or unmount this component
timeout={300}
classNames='my-element' // IMP!
unmountOnExit
>
<ComponentToBeAnimated />
</CSSTransition>
NOTE: Make sure to apply below styles using the class property in CSS:
.my-element-enter {
opacity: 0;
transform: scale(0.9);
}
.my-element-enter-active {
opacity: 1;
transform: translateX(0);
transition: opacity 300ms, transform 300ms;
}
.my-element-exit {
opacity: 1;
}
.my-element-exit-active {
opacity: 0;
transform: scale(0.9);
transition: opacity 300ms, transform 300ms;
}
Maybe react-magic can help you.