React.isValidElement
Knowing what input type you've received is hugely important in JavaScript, which is a big reason for Flow and TypeScript's rise. One such case where it's useful to know what an object represents is if the input is a string or a React element.
To detect if an object is a React element, you can use React.isValidElement(obj):
// Add a wrapping DIV if the content isn't a React element
// PropTypes.oneOfType([PropTypes.string, PropTypes.element])
render() {
const { content } = this.props
React.isValidElement(content)) ?
content :
{content}
}
I really like that React.isValidElement allows us to create flexible elements that accept React elements or strings; hugely useful in generic components like modals, alerts, and everywhere else!
![CSS Gradients]()
With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements. CSS gradients are another step in that direction. Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...
![7 Essential JavaScript Functions]()
I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent. Times have changed but there are still a few functions each developer should...
![Create a Clearable TextBox with the Dojo Toolkit]()
Usability is a key feature when creating user interfaces; it's all in the details. I was recently using my iPhone and it dawned on my how awesome the "x" icon is in its input elements. No holding the delete key down. No pressing it a...
![Fade Images with MooTools LazyLoad]()
I recently received an email from a MooTools developer asking a great question about my LazyLoad class:
"I'm using your LazyLoad MooTools plugin (which is great, by the way). I have been trying to figure out how to modify it so that once an image scrolls into...
