Aiska Basnet – Medium

Published in wesionaryTEAM

·Apr 11

Handling scrolls in react

This is a simple article on implementing and detecting scrolls in react. I have encountered this situation several times where I have to detect the current scroll position or move to a particular position in my page. So, let's begin. Using scroll event listener to get scroll position One of the simple technique is to register a scroll…

Scroll

2 min read

Published in wesionaryTEAM

·Feb 9

Top 3 CSS Tricks

In this article, I am sharing top 3 simple and useful tricks in CSS. 1. Adding line break in between paragraphs In some cases, you may need to add a line break in between a paragraph. So, instead of adding 2 paragraphs, we can simply line break in a single tag, as below. <p> {…

Ellipsis

2 min read

Published in wesionaryTEAM

·Jan 10

Creating grids in CSS in a better way

Let's say you have to create a grid same as above. There are different ways of achieving this. Using flex or grid layout will simply give us this layout but in some cases, the layout is distorted in small devices while checking for responsiveness. …

Grid

2 min read

Published in wesionaryTEAM

·Jan 4

Render HTML file in pages of next js

Once I had a rare case to display .html file as a page of my next js app. For that, I did the following: 1. Creating an HTML file Firstly, create an HTML file say myfile.html with your desired content <!DOCTYPE html> <html> <body> <p>Hy I am your html file</p> </body> </html> Now, place this…

Html In Next

2 min read

Published in wesionaryTEAM

·Dec 1, 2020

Storybook with Next JS

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…

Storybook

4 min read

Published in wesionaryTEAM

·Oct 29, 2020

Customizing antd timepicker

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. …

Antd

4 min read

Published in wesionaryTEAM

·Jul 16, 2020

Handling Scrolls in React

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. …

React

2 min read

Published in wesionaryTEAM

·Apr 23, 2020

Testing React app because just clicking around is not enough

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…

Testing

5 min read

Published in wesionaryTEAM

·Apr 22, 2020

Styling with react-jss

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…

React Jss

5 min read

Published in wesionaryTEAM

·Apr 17, 2020

Secure your React Apps with Auth0 — Part II

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…

Auth 0

5 min read