React is a library for web and native user interfaces.
Besides many tricks that improve the performance from within a React app, there are also tricks to improve the loading speed from the HTML document in which the React app is embedded. In this post, we will walk through some of these tricks. ...
React allows specifying the style of an HTML element from within the app, which is a powerful tool when the style depends on the data or logic of the app. On the other hand, CSS variables, also known as CSS custom properties, provide great flexibility for CSS. For example, the following code specifies a CSS variable of the h1 element: export default function App() { return <h1 style={{ "--component-style": "classical" }}>Hello World!</h1>; } However, the TypeScript compiler will complain: src/App.tsx:2:23 - error TS2353: Object literal may only specify known properties, and '"--component-style"' does not exist in type 'Properties<string | number, string & {}>'. 2 return <h1 style={{ "--component-style": "classical" }}>Hello World!</h1> ~~~~~~~~~~~~~~~~~~~ node_modules/@types/react/index.d.ts:2908:9 2908 style?: CSSProperties | undefined; ~~~~~ The expected type comes from property 'style' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>' In this post, we discuss how to properly type CSS variables in React. Here, we avoid using type assertions and strive for type safety by typing as narrowly as possible. ...
One common way to embed a JavaScript application in a web page is using iframe. Assuming the application is accessible from https://example.com/my-app and the embedding page is https://example.com/content, the embedding code in the embedding page would look like this: <body> <!-- Other content... --> <iframe src="https://example.com/my-app"><iframe> <!-- Other content... --> </body> This approach works for an application written in either vanilla JavaScript or any frameworks, like React or Vue. However, this risks two potentially undesired effects: Other websites may embed this application with iframe without permission. The visitor may visit the embedded iframe directly and thus have skipped the content of the parent page. This post discusses solutions that address these two problems. ...
Testing the presence of a Material UI Icon in Jest/Vitest can be done by using the Testing Library. First, in the production code, assign a titleAccess attribute to the icon. For example, if the icon of interest is AddIcon, the code would look like: <AddIcon titleAccess="My Add Icon" /> This attribute would also surface to the user interface. ...