Using React Contexts we can communicate across a hierarchy of Components. To understand this, think of a widget represented by a View component which has lots of child view components. You might use/re-use this component and want to pass certain properties or attributes that are relevant to different child components affecting the overall state (look and behaviour) of the main component in combination. Now one way to achieve this is by using props. But imagine passing an attribute all the way down from the parent to a child at the 5th level in the hierarchy. At every component level the property passed from the parent will have to be accessed (
this.props.propName) and further passed down. This can get really messy. So let’s see how contexts can be used to pass data across components in a much elegant manner.
While going through the codebase of React Bootstrap (for some reason), I came across an interesting implementation of a “React playground”. The code behind the playground is in ReactPlayground.js. I found this piece of interesting code there:
Writing CSS is really simple, we’ve been doing that since many years. But the problem is, in larger projects where the CSS code grows over thousands of lines, whether you’re alone or it is a team maintaining and building on the code, it gets really unwieldy (spaghetti code). Code gets hard to maintain, harder to debug, unoptimized leading to poor performance and highly inefficient. New team members start adding more code (classes, IDs, etc.) and start using them leading to a lot of redundant and unoptimized code here and there. Basically it gets hard, really hard. You end up into too many issues.
Working with the React Material UI and trying to make routing work (or even understand how it works) with clicks on the LeftNav item items ? It’s actually quite simple once you get a hang of it. I’ll show you the code and explain the logic behind how on clicking navigation links in LeftNav you navigate to different pages/URLs in your app/website (in a snap). We’ll be using React Router, Material UI and obviously, ReactJS itself. I’ve also uploaded the code to Github.
This is more of a quick tip on a Material UI integration than a detailed article. We’ll see how to open the LeftNav component on clicking the AppBar’s left icon (hamburger menu icon). Unfortunately the documentation as of now doesn’t show the ReactJS code for this. Obviously it’s not too hard to figure it out either if you go through the website’s source itself on Github.
copy commands via
document.execCommand(), a text selection can be cut or copied to the user’s clipboard in Chrome 43+, Opera 29+ and IE 10+. This means we can now cater to a part of our web userbase with the copy to clipboard feature without using Flash. Let’s write some code to see these commands in action.
document.execCommand() method is quite interesting. It can be used to execute certain commands to play with an editable region that is achieved either via the
contenteditable attribute or when the HTML document (of the main window or some iframe window) has been switched to
designMode using this code:
document.designMode = 'on'; // or 'off'
// or for an iframe
iframeNode.contentDocument.designMode = 'on'; // or 'off')
Infact try the first snippet right in dev tools and see what happens