Toggleable React state with a 1-line useReducer
Published on in JavaScript and React
Say goodbye to useState
and a silly toggler function calling the state setter.
Be cool and use a tiny reducer instead.
React
Toggleable React state with a 1-line
1 line of code to animate element additions, removals and moves
Published on in JavaScript, Mithril.js and React
AutoAnimate is a JS library that provides simple animations with no effort. Works with Mithril.js, React and any other JS app.
Your Button component should default to type="button"
Published on in JavaScript, React and TypeScript
A <button> element defaults to type="submit"
which can cause accidental form submissions.
Make type="button" the default in your Button component
to make your life easier.
Client-side navigation and React's dangerouslySetInnerHTML
Published on in JavaScript, React and TypeScript
Last updated on
To handle internal link clicks when using dangerouslySetInnerHTML,
attach click event listeners to the rendered links.
In the listener, push the link to the browser history.
React is a framework, not a library
React is marketed as a view library, but it's more accurately a (view component) framework.
React's ecosystem is a dumb necessity
Published on in JavaScript, Mithril.js, Rant and React
Last updated on
React's ecosystem is large, which is a good thing: lot's of great libraries to use. But it's also a bad thing: most of those libraries are compatible only with React.
JSX vs HTM (Hyperscript Tagged Markup)
Published on in JavaScript and React
Last updated on
HTM provides a transpiler-free alternative to JSX via tagged templates. HTM has some limitations, but can be used in browsers and can be good for smaller projects.
How to render Optimizely Content Recommendations using React
Published on in Episerver, JavaScript and React
Last updated on
Also known as Episerver/Idio Content Recommendations. The usual way of using a Mustache template can be circumvented by using a JavaScript proxy.
Updating React context outside of a component
Published on in React
React context is normally updated inside the React app. Here's a hacky way how I circumvented that restriction in a test file.
Name front-end test cases from user perspective
Published on in React
Such naming helps you create tests that resemble the way your users use your app.
Prefer accessible queries with (React) Testing Library
Published on in Accessibility and React
Accessible queries take into account the semantic meaning of HTML elements. Such queries help you write more accessible apps.
Episerver + TinyMCE + React = uh oh!
Thoughts on how to efficiently use React to render Episerver blocks embedded in TinyMCE fields.
Uncontrolled form inputs in React
Published on in JavaScript and React
Last updated on
If you need form input values only at the time of form submission, uncontrolled inputs can be nice to work with.
Hyperscript: hyperior alternative to JSX
Published on in JavaScript, Mithril.js and React
Last updated on
JSX is just JS under the hood.
Hyperscript is like that JS,
but better.
Example:
h('a.link', { href }, 'Click me')
is nicer than
<a className="link" href={href}>Click me</a>,
right? Right?!