parallax theorem

Create a Parallax Component in ReactJS - Part I
Published: 16-Aug-2018

Generally speaking, many React frameworks do not include a parallax component within their componentry.

Which is fine. It gives us an opportunity to build our own.

Here's how I built mine:

The JSX

src/components/parallax/index.jsx

import React from 'react';
import PropTypes from 'prop-types';
import validation from '../../utilities/validation/parallax';
const Parallax = (props) => {
const {
alpha,
blue,
children,
green,
heightUnit,
heightValue,
image,
red,
showForeground,
} = props;
const checkRed = validation.color(red);
const checkGreen = validation.color(green);
const checkBlue = validation.color(blue);
const checkAlpha = validation.alpha(alpha);
const styleParallax = `
.parallax {
background-image: url("${image}");
height: ${heightValue}${heightUnit};
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
`;
const styleForeground = `
.parallax-foreground {
background: rgb(${checkRed},${checkGreen},${checkBlue});
background: rgba(${checkRed},${checkGreen},${checkBlue},${checkAlpha});
height: 100%;
}
`;
return (
<React.Fragment>
<style>
{`
${styleParallax}
${showForeground ? styleForeground : ''}
`}
</style>
<div
className="parallax"
>
{showForeground
? (
<div
className="parallax-foreground"
>
{children}
</div>
) : (
<div>{children}</div>
)
}
</div>
</React.Fragment>
);
};
Parallax.defaultProps = {
alpha: 0.4,
blue: 255,
children: [],
green: 255,
red: 255,
showForeground: true,
};
Parallax.propTypes = {
alpha: PropTypes.number,
blue: PropTypes.number,
children: PropTypes.arrayOf(PropTypes.element),
green: PropTypes.number,
heightUnit: PropTypes.string.isRequired,
heightValue: PropTypes.number.isRequired,
image: PropTypes.string.isRequired,
red: PropTypes.number,
showForeground: PropTypes.bool,
};
export default Parallax;

And What Does All That JSX Do?

First, we import our dependencies. One of our dependencies is a custom library (parallax.js) which is located in the validation folder which itself is located in the utilities folder. We'll discuss the validation library in more detail in the next article.

The other dependencies are React and PropTypes. PropTypes helps us validate the types of props passed in to the component. React is - well, it's React.

The Parallax component accepts props. The next line destructures the expected props.

Once the props are destructured, the next step is to check that certain props are valid. These are the colors that may be passed to the optional foreground <div> (to hide the foreground <div>, set the prop showForeground to false). And the alpha property sets the transparency.

The styleParallax string constant is defined using a template literal, which provides the ability to easily include variables within a string.

The styleForeground string constant (also a template literal), stretches an internal <div> to the full height of the background container, and assigns a background color to it. If the browser the client is using is not compatible, it uses a non-transparent color. Which is annoying, but, it does mean that there is a fallback.

The next step is to return whatever it is that is required to be rendered.

The current version of React has this concept called Fragments, which enables elements to be grouped without adding extra nodes to the DOM. (Many code examples you may have come across will use a <div> to group elements within).

Within the Fragment, the Styles are added within a <Style> element. The classes included are determined by whether or not the foreground class is required. We use a ternary to determine this.

The hero of the component is the <div> with the parallax style. This will include the image and the height set. Note that you can set the image height to any height and any valid image unit, such as vh, px, em or %.

The inner <div> will either include the foreground style, or it won't (we're using a ternary as a conditional render). This means that if the foreground is not required, only the children will render within the child <div>.

That pretty much covers the component.

The next thing that follows is defining the default props of the Component. In this case, the color props, the children and the showForeground props are not required. So, these are assigned default values in case the developer chooses not to include them.

And after that the propTypes are defined. This part helps the developer ensure that the props demanded by the Parallax component are included. Or not.

And finally, the Component is exported for consumption by other Components.

Yay.

 

You can read about the validation tool in Part II of this series.

parallax theorem

Create a Parallax Component in ReactJS - Part I
Published: 16-Aug-2018

Generally speaking, many React frameworks do not include a parallax component within their componentry.

Which is fine. It gives us an opportunity to build our own.

Here's how I built mine:

The JSX

src/components/parallax/index.jsx

import React from 'react';
import PropTypes from 'prop-types';
import validation from '../../utilities/validation/parallax';
const Parallax = (props) => {
const {
alpha,
blue,
children,
green,
heightUnit,
heightValue,
image,
red,
showForeground,
} = props;
const checkRed = validation.color(red);
const checkGreen = validation.color(green);
const checkBlue = validation.color(blue);
const checkAlpha = validation.alpha(alpha);
const styleParallax = `
.parallax {
background-image: url("${image}");
height: ${heightValue}${heightUnit};
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
`;
const styleForeground = `
.parallax-foreground {
background: rgb(${checkRed},${checkGreen},${checkBlue});
background: rgba(${checkRed},${checkGreen},${checkBlue},${checkAlpha});
height: 100%;
}
`;
return (
<React.Fragment>
<style>
{`
${styleParallax}
${showForeground ? styleForeground : ''}
`}
</style>
<div
className="parallax"
>
{showForeground
? (
<div
className="parallax-foreground"
>
{children}
</div>
) : (
<div>{children}</div>
)
}
</div>
</React.Fragment>
);
};
Parallax.defaultProps = {
alpha: 0.4,
blue: 255,
children: [],
green: 255,
red: 255,
showForeground: true,
};
Parallax.propTypes = {
alpha: PropTypes.number,
blue: PropTypes.number,
children: PropTypes.arrayOf(PropTypes.element),
green: PropTypes.number,
heightUnit: PropTypes.string.isRequired,
heightValue: PropTypes.number.isRequired,
image: PropTypes.string.isRequired,
red: PropTypes.number,
showForeground: PropTypes.bool,
};
export default Parallax;

And What Does All That JSX Do?

First, we import our dependencies. One of our dependencies is a custom library (parallax.js) which is located in the validation folder which itself is located in the utilities folder. We'll discuss the validation library in more detail in the next article.

The other dependencies are React and PropTypes. PropTypes helps us validate the types of props passed in to the component. React is - well, it's React.

The Parallax component accepts props. The next line destructures the expected props.

Once the props are destructured, the next step is to check that certain props are valid. These are the colors that may be passed to the optional foreground <div> (to hide the foreground <div>, set the prop showForeground to false). And the alpha property sets the transparency.

The styleParallax string constant is defined using a template literal, which provides the ability to easily include variables within a string.

The styleForeground string constant (also a template literal), stretches an internal <div> to the full height of the background container, and assigns a background color to it. If the browser the client is using is not compatible, it uses a non-transparent color. Which is annoying, but, it does mean that there is a fallback.

The next step is to return whatever it is that is required to be rendered.

The current version of React has this concept called Fragments, which enables elements to be grouped without adding extra nodes to the DOM. (Many code examples you may have come across will use a <div> to group elements within).

Within the Fragment, the Styles are added within a <Style> element. The classes included are determined by whether or not the foreground class is required. We use a ternary to determine this.

The hero of the component is the <div> with the parallax style. This will include the image and the height set. Note that you can set the image height to any height and any valid image unit, such as vh, px, em or %.

The inner <div> will either include the foreground style, or it won't (we're using a ternary as a conditional render). This means that if the foreground is not required, only the children will render within the child <div>.

That pretty much covers the component.

The next thing that follows is defining the default props of the Component. In this case, the color props, the children and the showForeground props are not required. So, these are assigned default values in case the developer chooses not to include them.

And after that the propTypes are defined. This part helps the developer ensure that the props demanded by the Parallax component are included. Or not.

And finally, the Component is exported for consumption by other Components.

Yay.

 

You can read about the validation tool in Part II of this series.