green tick ok

Create a Parallax Component in ReactJS - Part II
Published: 20-Aug-2018

In the previous post, we talked about the JSX required to make a parallax component. In this article, we will touch on the validation utility:

src/utilities/validation/parallax.js

const validation = {
default: {
color: 255,
alpha: 0.4,
},
color(color) {
let validColor = this.default.color;
if (!Number.isNaN(color)) {
if (color < 0) {
validColor = 0;
} else if (color > 255) {
validColor = 255;
} else {
validColor = color;
}
}
return validColor;
},
alpha(alpha) {
let validAlpha = this.default.alpha;
if (!Number.isNaN(alpha)) {
if (alpha < 0) {
validAlpha = 0;
} else if (alpha > 1) {
validAlpha = 1;
} else {
validAlpha = alpha;
}
}
return validAlpha;
},
};
export default validation;

What Does It Do?

The first thing happening is that a validation object is defined as a const.

Within the object, some default values are defined (color: 255 and alpha: 0.4). The reason for these values is that the default overlay of the parallax can now be set to a white box with a transparency of 40%.

The color test first assigns the default color value to the validColor variable. It then checks whether or not the color argument that is passed in is a number. If it is not, it immediately returns the validColor (which has been assigned the default color value).

If color is a number, it uses the validColor variable to force a value of 0 or 255 if the number passed in is outside the standard color spectrum. If the number passed in is a valid color, the validColor variable is changed to the number passed in, and that number is used by the parallax overlay.

The alpha value works exactly the same way, except that the accepted values are different. alpha can only use values between 0 and 1.

 

The end.

green tick ok

Create a Parallax Component in ReactJS - Part II
Published: 20-Aug-2018

In the previous post, we talked about the JSX required to make a parallax component. In this article, we will touch on the validation utility:

src/utilities/validation/parallax.js

const validation = {
default: {
color: 255,
alpha: 0.4,
},
color(color) {
let validColor = this.default.color;
if (!Number.isNaN(color)) {
if (color < 0) {
validColor = 0;
} else if (color > 255) {
validColor = 255;
} else {
validColor = color;
}
}
return validColor;
},
alpha(alpha) {
let validAlpha = this.default.alpha;
if (!Number.isNaN(alpha)) {
if (alpha < 0) {
validAlpha = 0;
} else if (alpha > 1) {
validAlpha = 1;
} else {
validAlpha = alpha;
}
}
return validAlpha;
},
};
export default validation;

What Does It Do?

The first thing happening is that a validation object is defined as a const.

Within the object, some default values are defined (color: 255 and alpha: 0.4). The reason for these values is that the default overlay of the parallax can now be set to a white box with a transparency of 40%.

The color test first assigns the default color value to the validColor variable. It then checks whether or not the color argument that is passed in is a number. If it is not, it immediately returns the validColor (which has been assigned the default color value).

If color is a number, it uses the validColor variable to force a value of 0 or 255 if the number passed in is outside the standard color spectrum. If the number passed in is a valid color, the validColor variable is changed to the number passed in, and that number is used by the parallax overlay.

The alpha value works exactly the same way, except that the accepted values are different. alpha can only use values between 0 and 1.

 

The end.