Adding storybook in our project can be super helpful as they help us to design components in isolation. Also, whenever multiple developers are working in a same project, the stories that we add can be used as a reference to know how the components look and play around with them without looking at their internal code. For more details, please visit their official page.

StoryBook In Next JS
StoryBook In Next JS
StoryBook In Next JS

Adding Storybook

Along with this, we also need to add some addons: these addons helps us to add extra functionalities to our stories. I am going to add following addons in this project:


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.

Image for post
Image for post

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.


Image for post
Image for post
Source: https://reactjs.org/

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:

In handleScroll , you can…


Image for post
Image for post

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.

Image for post
Image for post
JSS logo

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.

Image for post
Image for post
Auth0

Creating a React App

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

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.


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.

Image for post
Image for post
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. …


Image for post
Image for post

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…


Image for post
Image for post

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.

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

Output:


Image for post
Image for post
React Slick for displaying carousel

Sometimes there may be a need to display slideshow of images in our react project, that is to display carousel. For example, to display gallery, displaying images in slideshow can be an option. There are a number of ways to do so. One of them is using React Slick.

Installation

Installing React Slick is easy. You can do it in following way:

You can also install via npm as below:

Usage

After you install react-slick, you can use it by importing it in your file as below:

Inside the Slider component…

Aiska Basnet

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store