To pass props with styled-components with React, we pass it in as its child.
For instance, we write
const StyledWrapper = styled.div`
/* ... */
`;
const Wrapper = ({ message }) => {
return <StyledWrapper>{message}</StyledWrapper>;
};
to create the StyledWrapper component from the styled-components styled.div tag.
Then we create the Wrapper component that takes the message prop and pass it in as its child.
Sometimes, we want to load HTML template with JavaScript.
In this article, we’ll look at how to load HTML template with JavaScript.
To load HTML template with JavaScript, we use the importNode method.
For instance, we write
<html>
<head>
<template>My template</template>
</head>
<body>
<script>
document.body.append(
document.importNode(document.querySelector("template").content, true)
);
</script>
</body>
</html>
to call importNode to import the template element’s content.
Then we call append to append the template element’s content into the body element as its last child.
To load HTML template with JavaScript, we use the importNode method.
Sometimes, we want to wait for a condition with Protractor and JavaScript.
In this article, we’ll look at how to wait for a condition with Protractor and JavaScript.
To wait for a condition with Protractor and JavaScript, we use the wait method.
For instance, we write
const EC = protractor.ExpectedConditions;
const e = element(by.id("xyz"));
browser.wait(EC.presenceOf(e), 10000);
expect(e.isPresent()).toBeTruthy();
to get the element with ID xyz with by.id.
Then we call wait to wait for the presence of the element with presenceOf.
It times out after 10000ms.
Then we check if the element is present with isPresent.
To wait for a condition with Protractor and JavaScript, we use the wait method.
Sometimes, we want to detect when the user presses Enter in an input field with JavaScript.
In this article, we’ll look at how to detect when the user presses Enter in an input field with JavaScript.
To detect when the user presses Enter in an input field with JavaScript, we check the key code.
For instance, we write
const inputId = document.getElementById("input-id");
inputId.addEventListener("keyup", (e) => {
if (e.keyCode === 13) {
console.log("Enter");
}
});
to get the input with getElementById.
Then we add a keyup event listener to it with addEventListener.
In the event listener, we check if enter is pressed by checking if keyCode is 13.
To detect when the user presses Enter in an input field with JavaScript, we check the key code.
Sometimes, we want to convert canvas to PDF with JavaScript.
In this article we’ll look at how to convert canvas to PDF with JavaScript.
To convert canvas to PDF with JavaScript, we use jsPDF.
For instance, we write
<script src="//cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<canvas id="myCanvas" width="578" height="200"></canvas>
<button id="download">download</button>
to add the jsPDF script, canvas and button.
Then we write
const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.rect(5, 5, 290, 140);
ctx.stroke();
download.addEventListener("click", () => {
const imgData = canvas.toDataURL("image/jpeg", 1.0);
const pdf = new jsPDF();
pdf.addImage(imgData, "JPEG", 0, 0);
pdf.save("download.pdf");
});
to get the canvas with getElementById.
And then we get its context with getContext.
Next we draw a rectangle with rect.
Then we add a click listen to the button with addEventListener.
In it, we call toDataURL to return a base64 URL string with the canvas content as a JPEG.
And then we call pdf.addImage to add the base64 string into the pdf.
Finally, we call save to save the image as download.pdf.
To convert canvas to PDF with JavaScript, we use jsPDF.