I have been using Ant Design in my recent project and I had a requirement of using time picker for allowing users to select time. For this, I used a component of antd, the TimePicker component.

There are lots of properties available to use in TimePicker component. Please feel free to explore the API section of this component

In this article, I am going to utilize a lot of properties of this component and also, apply my own trick to customize this component as per my need.

There can be a lot of cases when you need to handle scrolls. For example, you may have to scroll to a particular component of a page or to detect in which portion of the page are you currently in. In this article, I will show you how to implement such features.

Handling Scrolls

A scroll event is fired each time you scroll a page. You can use onScroll method on any component in React. This method is called each time you scroll a page. Lets begin by assigning onScroll to a div as below:

<div onScroll={handleScroll}>

In handleScroll , you can…

Testing is an important part of software development life cycle. Manually traversing through all the pages and components and clicking around to test for expected outcome is not enough. Here, by testing, I mean writing automated tests: how to write unit testing for components.

Why to Test?

Testing is an activity in which we check whether the obtained result matches our expected outcome or not. Testing ensures that our product or software meets the requirement. Testing also helps to find out potential errors in our software, thus resulting in better software quality.

What to test and what not to?

Knowing what do we want to test in our application is…

Creating a functional app only is not enough. It should have a nice look and feel too. There are a number of ways in which you can style a react component. This article covers styling a basic react app with react-jss.

What is react-jss?

react-jss integrates JSS with our react app to style components. It helps us to write CSS with JS and allows us to describe styles in a more descriptive, conflict-free and reusable way.

Benefits compared to using the core JSS package directly:

• Dynamic Theming — allows context based theme propagation and runtime updates.
• Critical CSS extraction — only CSS from rendered components gets extracted.
• Lazy evaluation — Style Sheets…

In the previous part, I had configured auth0 by creating a new account. In this article, I will continue by making use of the account and connecting it to our react application. Lets begin by creating a new react application.

Creating a React App

We create a react app by using create-react-app command as below:

$create-react-app react-auth

You can give any name to the project. Here, I have named react-auth as my project name.

You can now navigate to the project and start the project.

$yarn start

Authentication is an important part of our application. Adding authentication helps us to track number of things in our application and also helps to make our application secure. In this tutorial, I will guide you through adding authentication to our react application using Auth0.

This is the first part of article. In this, I will guide you through the introduction of auth0, how authentication in single page application differ from traditional authentication and how to create a application in auth0.

What is Auth0?

Auth0 is a flexible, drop-in solution to add authentication and authorization services to our application. …

Creating a todo app is quite simple and interesting. Throughout this article, you can be familiar with various react concepts. You can also have a quick overview regarding how to implement material ui in our application. Besides, this also provides basic knowledge regarding various other concepts like redux, many more. Lets begin!

What is Todo app?

Todo is a simple application that allows user to add and save entries, edit or delete them as per user requirements. For this, you simply type in a text in a textbox and click add. After you have added the item, it should appear in the list.

Creating a React App

The…

Forms allows us to accept feedback or input from users. Having forms in our application is an essential step. Similar to HTML, React also uses forms to interact with users.

Adding a simple form in React

Below is a class based component that has a form which accepts name from user.

import React from 'react';const FormExample = () => {
    return (
        <form>
            <h1>Forms in React</h1>
            <p>First Name:</p>
            <input type="text" />
       </form>
    )
}export default FormExample;

Output: