Alex Alex - 3 months ago 21
jQuery Question

react update component margin-top with jQuery

I have the following:

import React from 'react';
import {render} from 'react-dom';

class Splash extends React.Component {
updateVideoMarginTop() {
// update #video-wrapper height() to match window.height
}
render () {
return (
<div className="video-wrapper">
<video id="video">
<source id="mp4" src="video/sample.mp4" type="video/mp4" />
</video>
</div>
);
}
}

export default Splash;


What is the best way (less jQuery and more react if possible) of updating the margin-top of a component to match the window height?

Answer

You can use inline styles for example like so:

import React from 'react'; import { render } from 'react-dom';

class Splash extends React.Component {
    render () {
        return (
            <div className="video-wrapper" style={{ marginTop: `${window.innerHeight}px` }}>
                <video id="video">
                    <source id="mp4" src="video/sample.mp4" type="video/mp4" />
                </video>
            </div>  
        );
    } 
}

export default Splash;

Notice the style attribute on the outer div. You can apply inline styles to any element. Just keep in mind, the css you apply is written in camelCase, for example background-color becomes backgroundColor, and all values have to be in quotes (unlike real css).

Comments