In React apps, state should be immutable. For every state change in our component, we should create a new state object. Consider the following state object.
const [complexState, setComplexState] = useState({
data: [
{
id: 1,
message: "Hello",
read: false
},
{
id: 2,
message: "World",
read: false
}
]
});State object has a data property. This is an array of objects.…
This tutorial shows how to implement drag and drop using react-dnd. The official tutorial is a bit long. So, I created a simpler app to illustrate how to integrate react-dnd in your apps. There is a github repository for this tutorial.
There are two elements on which we write event handlers: the drag element and the drop element.…
Firebase Dynamic Links module provides a link which we can share with other apps. The recipient of the link may not have the app. In that case, the dynamic link takes the user to the App Store and prompts the user to install the app. When the app opens after the installation, it receives the link embedded within the Dynamic link.…
Dynamic Links of Firebase allow developers to send a link to other apps. When the user clicks on the link from the other app, our app opens. Our app receives a link on starting up and we can do pretty much anything based on the link. What is more interesting is that when the app is not installed, Dynamic links prompt the user to install the app.…
Every popover element has a little arrow. We see this pattern all over when we click on a button and a div pops up. Here is an example of this UI pattern – Box arrow.
In this post, I will walk through how this works. Here is a CodePen for this post.
The HTML is only a div containing some text.…
Generator function is a function that can pause, accept some input and run again.
Consider the printHello function which returns “Hello world”
function* printHello() {
yield 'Hello world';
}When a function has an asterix (*) as suffix, it becomes a generator function. How do we invoke a generator function?
const iterator = printHello();
let result = iterator.next();
There are lot of reasons to love React Hooks. But I have one reason that stands out from the rest.
Consider a class component that sets some state. This component has a controlled input within it.
class MyInput extends Component {
state = { text: '' };
render() {
<input type="text" value={text} onChange={..} /}
}With class components there are three ways to write onChange handler.…
Gatsby and NextJS are popular alternatives to create static websites using React. This tutorial shows how to work with NextJS. We want to take some pages written in markdown and convert them to static pages. Along the way, we will explore NextJS features.
The sample app is available in Netlify. It is a company website that offers development services.…
Gatsby and NextJS are popular alternatives to create static websites using React. This tutorial shows how to work with Gatsby: use CSS modules to style, add a new page, navigate between pages, create a custom layout, add a plugin, process markdown files, use GraphQL and create custom pages.
The sample app is available in Netlify. There is a Home page which has a background image and a link to Services page.…
When we have multiple projects using similar code, there is an urge to publish them as NPM packages. Should we publish them as public NPM packages or private NPM packages which can be used only within our enterprise? Or when should we avoid publishing a NPM package?
Let’s assume we have this question for UI projects. Most UI projects run on the browser.…