Forem: Sreashi Saha

React Animations Using Framer Motion

Sreashi Saha — Sun, 25 Jul 2021 17:26:32 +0000

Before Knowing about framer motion first we should know why should we need Framer motion? Framer motion improves upon and simplifies the API in a way that couldn't have been done without breaking changes and rewriting. As a react developer, I found it very exciting as I can create animations using technologies that I’m already familiar with.

What is Framer Motion?

Framer Motion is a production-ready motion library to create animations using React. It brings declarative animations, effortless layout transitions, and gestures while maintaining HTML and SVG semantics.

How to use Framer Motion in our Project

Install framer motion using in your project using

npm install framer-motion

Remember one thing Framer-Motion requires that you are using React version 16.8 or higher.

Once installed, you can import Motion into your components via framer-motion.

import { motion } from "framer-motion"

That’s it. Now you are able to use framer-motion in your Project. Let's see basic syntaxes of Framer Motion with few examples.

Animation
Animations are driven by Framer Motion’s versatile animate prop. It can cater to the very simplest, and most advanced use-cases.

Motion components are one of the core elements in Framer Motion, and most animations in Framer Motion are controlled via the motion component’s flexible animate property.*

Depending on your requirements, you can use the animate property in a variety of ways:

<motion.div animate={{ x: 200,rotate:180 }} />

In the above example, the div tag will move 200px to the right and rotate 180 degrees.

Transition
This transition can be optionally configured using Popmotion’s familiar tween, spring, and inertia animations.

Physical properties like x and scale are animated via spring by default, while values like opacity and color are animated with a tween. You can also use the transition prop to change properties like duration, delay, and stiffness of the animation.

<motion.div animate={{ x: 200,rotate:180 }}   
transition={{ duration: 2, repeat: Infinity }} />

In the above example, the div tag will move 200px to the right and rotate 180 degrees. the duration and repeat props are used to keep that animation in a loop with a duration of 2 seconds.

Keyframes

Values in animate can also be set as a series of keyframes. This will animate through each value in a sequence. By default, a keyframes animation will start with the first item in the array.

<motion.div animate={{ scale: [2, 2, 1] }} />

In the above example, div will scale through each value in the sequence.

Variants

Variants are a collection of pre-defined target objects passed into motion components by using the variants prop. Target objects are useful for simple, single-component animations. But sometimes we want to create animations that propagate throughout the DOM and orchestrate those animations in a declarative way.

By defining variants on a set of components, providing a variant label to animate will propagate this animation through all the children like additional transition props such as when, delayChildren, and staggerChildren.

import * as React from "react";
import { motion } from "framer-motion";


    const variants = {
     open: {
      transition: { staggerChildren: 0.09, delayChildren: 0.3 }
     },
     closed: {
      transition: { staggerChildren: 0.06, staggerDirection: -1 }
     }
    };
    export const Navigation = () => (
      <motion.ul variants={variants}>
        {itemIds.map(i => (
          <MenuItem i={i} key={i} />
        ))}
      </motion.ul>
    );


const itemIds = [ 1, 2, 3, 4];

In the above example, staggerChildren and delayChildren props are used to delay the transition of the menu items. In addition, the staggerDirection prop is used to specify the direction of the stagger.

Gestures
Motion extends the basic set of event listeners provided by React with a simple yet powerful set of UI gesture recognizers. It currently has support for hover, tap, pan, and drag gesture detection. Each gesture has a series of event listeners that you can attach to your motion component.

Hover

The hover gesture detects when a pointer hovers over or leaves a component. There are three hover props available — whileHover, onHoverStart(event, info), and onHoverEnd(event, info).


<motion.div
  whileHover={{ scale: 1.2 }}
  onHoverStart={() => console.log("starts")}
  onHoverEnd={() => console.log("ends")}

/>

n the above example, when we will hover over the div its size will increase and when we start hovering in the console it will print 'start', and when we stop hovering it will print 'end'.

Focus

The focus gesture detects when a component gains or loses focus through a click, focus, or by tabindex. the focus prop is whileFocus.

<motion.div
whileFocus={{ scale: 1.5 }}
/>

In the above example, when we will focus on the div its size will increase.

Tap

The tap gesture detects when a pointer presses down and releases on the same component.

There are three hover props available — whiletap,onTap(event,info),onTapStart(event, info),onTapCancel(event, info)

<motion.div whileTap={{ scale: 1.2 }} />

In the above example, when we will Tap on the div its size will increase.
Pan

The pan gesture recognizes when a pointer presses down on a component and moves further than 3 pixels. The pan gesture is ended when the pointer is released.

There are three hover props available — onPanStart,onPan,onPanEnd

For pan gestures to work correctly with touch input, the element needs touch scrolling to be disabled on either x/y or both axis with the touch-action CSS rule

function onPan(event, info) {
  console.log(info.point.x, info.point.y)
}


<motion.div onPan={onPan} />

In the above example, A Info object containing x and y values for point is relative to the device or page. delta is Distance moved since the last event. offset is Offset from the original pan event. velocity is the Current velocity of the pointer.
Drag

The drag gesture follows the rules of the pan gesture but applies pointer movement to the x and/or y-axis of the component.

<motion.div
  drag
  dragTransition={{
    min: 0,
    max: 100,
    bounceStiffness: 100
  }}
>
 Drag 

</motion.div>

In the above example, dragging is enable for both x-direction and y-directions. If you want to limit it only to the x-direction, you can set the drag property value to “x”: drag=“x”.

Hopefully, It helps you to start using framer motion in your React project for building some really cool animations. If any queries regarding this write them down in the comment below. Thank you for your time and I hoped my blog is helpful for you.

Happy Learning!!

React Code Splitting

Sreashi Saha — Sun, 04 Jul 2021 20:24:40 +0000

Before Knowing about Code Splitting we need to know Why we need Code Splitting these first we need to know about bundling. Bundling is a process that takes multiple files and merges them into a single file, which is called a bundle. Most React apps will have their files “bundled” using tools like Webpack, Rollup, or Browser. Let's see an example:
App:

import { add } from './math.js';

// math.js

export function add(a, b) {

  return a + b;
}


console.log(add(2, 4)); // 6

Bundle:

function add(a, b) {
  return a + b;
}


console.log(add(2,4)); // 6

As our app grows, our bundle will grow, especially when using large third-party libraries. If the bundle size gets large, it takes a long time to load on a webpage. Resolving these issues Code splitting comes into the scenario.

Code Splitting
Code-Splitting is a feature supported by Webpack and Browserify, which can create multiple bundles that can be dynamically loaded at runtime. Code splitting your app can help you “lazy-load” just the things that are currently needed by the user.
Features

The code splitting improves the performance of the app
The code splitting improves the impact on memory
The code splitting improves the downloaded Kilobytes (or Megabytes) size

import()

The best way to introduce code-splitting into your app is through the dynamic import(). When Webpack comes across this syntax, it automatically starts code-splitting your app. If you’re using Create React App, this is already configured for you and you can start using it immediately.

Before:

import { sub } from './math';

console.log(sub(20, 10));

After:

import("./math").then(math => {
  console.log(math.sub(20, 10));
});

React.lazy:
The React.lazy function lets you render a dynamic import as a regular component.React.lazy takes a function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. React.lazy and Suspense are not yet available for server-side rendering.
Before:

import OtherComponent from './ExampleComponent';

After:

const OtherComponent = React.lazy(() => import('./ExampleComponent'));

This will automatically load the bundle containing the ExampleComponent when this component is first rendered.

React.lazy components are not yet available for server-side rendering. For code-splitting in a server-rendered app, it is recommended to use Loadable Components.

Suspense:

If the module which contains the ExampleComponent is not yet loaded by the function component(MyComponent), then the lazy component should then be rendered inside a Suspense component, which allows us to show some fallback content while we’re waiting for the lazy component to load.

*The fallback prop accepts any React elements that you want to render while waiting for the component to load.

*You can place the Suspense component anywhere above the lazy component.

*You can even wrap multiple lazy components with a single Suspense component.

Before:

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

After:

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </div>
  );
}

Suspense components are not yet available for server-side rendering. For code-splitting in a server-rendered app, it is recommended to use Loadable Components.

Error boundaries:

If any module fails to load, for example, due to network failure, we will get an error that can handle these errors with Error Boundaries. Once we have created the Error Boundary, we can use it anywhere above our lazy components to display an error state.

import MyErrorBoundary from './MyErrorBoundary';  
const ExampleComponent = React.lazy(() => import('./ ExampleComponent'));  
const ExamComponent = React.lazy(() => import('./ ExamComponent'));  

const MyComponent = () => (  
  <div>  
    <MyErrorBoundary>  
      <Suspense fallback={<div>Loading...</div>}>  
        <section>  
          <ExampleComponent />  
          <ExamComponent />  
        </section>  
      </Suspense>  
    </MyErrorBoundary>  
  </div>  
);

Route-based code splitting:
Deciding where in your app to introduce code splitting can be a bit tricky. You want to make sure you choose places that will split bundles evenly but won’t disrupt the user experience.

A good place to start is with routes. Most people on the web are used to page transitions taking some amount of time to load. You also tend to be re-rendering the entire page at once so your users are unlikely to be interacting with other elements on the page at the same time.

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);

Named Exports:
React.lazy currently supports only default exports. An intermediate module that re-exports as default has to be created if one wants to import a module that uses named exports. This ensures the working of tree shaking and prevents the pulling in of unused components.
Components.js

export const Component = /* ... */;
export const MyUnusedComponent = /* ... */;

Component.js

export { Component as default } from "./Components.js";

MyApp.js

import {React, lazy} from 'react';
const Component = lazy(() => import("./Component.js"));

Hopefully, Code Splitting is a bit clear by now. It helps to improve your efficiency in writing React. If any queries regarding this write them down in the comment below. Thank you for your time and I hoped my blog is helpful for you.

Accessibility in React

Sreashi Saha — Wed, 23 Jun 2021 09:52:32 +0000

Accessibility is the ability for applications to be used by everyone, including those with disabilities.As a devloper its your responsibility to make sure that everyone get the right experience in your app. For making your react app Accessible you should know what is accessibility exactly is?? so let's get started

What is Accessibility and Why it is needed?

Web accessibility is also referred to as a11y.A11y is a numero-nym that stands for accessibility as “a” followed by 11 more letters, followed by “y”.It is the design and creation of websites that can be used by everyone.

Accessibility support is necessary to allow assistive technology to interpret web pages.
Accessibility is the necessary tool or ways in which a website can be made easy to access by the user with features like clickable buttons or drop downs or spaces to write a comment and stuff.
Accessibility also helps in power users may find it faster to interact with your application using a keyboard, rather than a mouse or touch screen. Especially for applications involving a large amount of data entry, good keyboard navigation support can dramatically increase user productivity.

Accessibility Standards and Guidelines
There are some standard guidelines available for achieving accessibility which helps us to achive accessibility for building websites.Some of them are:

WCAG: Web Content Accessibility Guidelines (WCAG) is developed through the W3C process in cooperation with individuals and organizations around the world, with a goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally.The WCAG documents explain how to make web content more accessible to people with disabilities. Web “content” generally refers to the information in a web page or web application, including:

natural information such as text, images, and sounds
code or markup that defines structure, presentation, etc.

WAI-ARIA: Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) is the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with HTML, JavaScript, and related technologies.

Accessibility Using React:

React fully supports building accessible websites, often by using standard HTML techniques.Let's see how we can make your react applications more accessible.

ARIA:
Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make Web content and Web applications more accessible for users with disabilities.ARIA HTML attributes are fully supported in JSX, and therefore can be used as attributes for elements and components in React. Whereas most DOM properties and attributes in React are camelCased, these attributes should be hyphen-cased.

<input
  aria-label={labelText}
  aria-required="true"
  onChange={onchangeHandler}
  value={inputValue}
  name="name"
/>

Semantic HTML:
Semantic HTML is the foundation of accessibility in a web application.Sometimes we break HTML semantics when we add <div> elements to our JSX to make our React code work, especially when working with lists (<ol>, <ul> and <dl>) and the HTML <table> this makes a problem of understanding the code and thus debugging the code.

So at times, we use pieces like <> or allows you to group together a list of child elements without adding more nodes to the DOM.

import React, { Fragment } from 'react';
function  employeeList() {
return (
    <Fragment>  
        <dt>EA824412</dt>
        <dd> Sreashi Saha</dd>
    </Fragment> );
}

Labeling:
Labeling is used to makes the forms accesible.Every HTML form control, such as <input> and <textarea>, needs to be labeled accessibly. There is one important thing you must provide in your application: a textual label for each control . This gives a screen reader user context about the control they are interacting with.Although these standard HTML practices can be directly used in React, note that the for attribute is written as htmlFor in JSX:

<label htmlFor="name">Name:</label>
<input id="name" type="text" name="name"/>

Keyboard Focus:
Keyboard Focus refers to the part of the web application that is accepting data or actions from the keyboard from the user often refers to the DOM input.We can use ref functions to handle where we want the user to focus on in our application.Using the React.createRef() we can control the focus.

Use the ref callback to store a reference to the text input DOM
Create a ref to store the textInput DOM element

Let's have a look how to create a ref to an element in the JSX of a component class..

class CustomDiv extends React.Component {
  constructor(props) {
    super(props);

    this.div = React.createRef();
  }
  render() {

    return (
      <div
        tabIndex= "-1"

        ref={this.div}
      />
    );
  }


}

Then we can focus it elsewhere in our component when needed:

Explicitly focus the div using raw DOM API
We are accessing "current" to get the DOM node

focus() {

 this.textInput.current.focus();


}

When using a HOC to extend components, it is recommended to foward the ref to the wrapped component using the forwardRef function of React. If a third party HOC does not implement ref forwarding, the above pattern can still be used as a fallback.

Setting Document Title:

Setting document title provides a declarative way to specify document.title in a single-page app.It is actually crucial for screen readers, the document title is the first thing screen readers announce. It updates the content currently showing in the browser tab helping to announce exactly where the users (who might depend on screen readers) are in your application. It is also really great for search engine optimisation.Set the document <title> to correctly describe the current page content as this ensures that the user remains aware of the current page context.Let's see an example:

function App() {
  return (
    <DocumentTitle title='My Web App'>
      <SomeRouter />
    </DocumentTitle>
  );
}

class NewArticlePage extends React.Component {
  constructor(props) {
    super(props);
    this.state = { title: 'Untitled' };
  }

  render() {
    return (
      <DocumentTitle title={this.state.title}>
        <div>
          <h1>New Article</h1>
          <input
            value={this.state.title}
            onChange={(e) => this.setState({ title: e.target.value })}
          />
        </div>
      </DocumentTitle>
    );
  }

Development Assistance:
Devlopment Assistance can helps to improve yours website Accessibility.

Install ESLint jsx-a11y plugin for your React projects to display accessibility rules you miss while building your application.

npm install eslint-plugin-jsx-a11y  -— save-dev

Update your eslint.rc file’s plugin and extends sections in your code editor. For plugin section:

{
  "extends": ["react-app", "plugin:jsx-a11y/recommended"],
  "plugins": ["jsx-a11y"]

}

Hopefully, It helps to improve your efficiency writing React and also helps to build your website more accesible. If any queries regarding this write them down in the comment below. Thank you for your time and I hoped my blog is helpful for you.

Happy Learning!!

ReactDOM

Sreashi Saha — Sat, 05 Jun 2021 13:45:43 +0000

Before knowing about ReactDom first we should know about What DOM is?? So Dom is a Document Object Model, a tree-like structure that contains all the elements and properties of a website as its nodes.

What is React-Dom??

The react-dom package provides DOM-specific methods that can be used at the top level of your app to enable an efficient way of managing DOM elements of the webpage.

How to import React-Dom?

To use the ReactDOM in any React web app we must first import ReactDOM from the react-dom packages by the following syntax.

ES6 - import ReactDOM from 'react-dom'
ES5-var ReactDOM = require('react-dom')
ReactDOM provides the developers with an API containing the following methods.

*render()
*hydrate()
*unmountComponentAtNode()
*findDOMNode()
*createPortal()

render( ) : render() is used to render a single React Component or several Components wrapped together in a Component or a div element.

Syntax:

ReactDOM.render(element, container, callback)

Render a React element into the DOM in the supplied container.
If the React element was previously rendered into container, this will perform an update on it.

If the optional callback is provided, it will be executed after the component is rendered or updated.

return a reference to the component or returns null for stateless components.

hydrate(): hydrate() is same as render(), but is used to hydrate a container whose HTML contents were rendered by ReactDOMServer. React will attempt to attach event listeners to the existing markup.

Syntax:

ReactDOM.hydrate(element, container, callback)

unmountComponentAtNode() : unmountComponentAtNode() is remove a mounted React component from the DOM and clean up its event handlers and state.

If no component was mounted in the container, calling this function does nothing. Returns true if a component was unmounted and false if there was no component to unmount.

Syntax:

ReactDOM.unmountComponentAtNode(container)

findDOMNode(): This function is generally used to get the DOM node, this returns the corresponding native browser DOM element. This method is useful for reading values out of the DOM, such as form field values and performing DOM measurements. In most cases,

you can attach a ref to the DOM node and avoid using findDOMNode at all

findDOMNode is an escape hatch used to access the underlying DOM node.

In most cases, the use of this escape hatch is discouraged because it pierces the component abstraction. It has been deprecated in StrictMode.
This method takes a single parameter component that expects a React Component to be searched in the Browser DOM.

Syntax:

ReactDOM.findDOMNode(component)

createPortal(): Portals provide a way to render children into a dom node that exists outside the hierarchy of the DOM component.

when an element is returned from a component’s render method, it’s mounted on the DOM as a child of the nearest parent node which in some cases may not be desired.

Syntax:

ReactDOM.createPortal(child, container)

Conclusion:

ReactDOM uses observables thus provides an efficient way of DOM handling.

ReactDOM can be used on both the client-side and server-side.

Hopefully, ReactDOM is a bit clear by now. If any queries regarding this write them down below. Thank you for your time and I hoped my blog is helpful for you.

Happy Learning!!

useState and useEffect in React

Sreashi Saha — Sat, 29 May 2021 10:14:11 +0000

In this blog, we will learn about useState and useEffeact in react hooks. Hooks are a new edition in React 16.8. React hooks provide an ability to use state and lifecycle functions within functional components.

Before knowing about the two major hooks(i.e useState and useEffect) we need to keep some major rules regarding hooks in our mind.

Don’t call hooks from inside nested functions, loops, or conditionals.
Don’t call hooks from a regular JavaScript function.

useState

The useState hook is a function that takes one argument, which is the initial state, and it returns two values: the current state and a function that can be used to update the state.

let's see an example

 import React, { useState } from 'react';

    function Example() {
      const [count, setCount] = useState(0);

      return (
        <div>
           <p>You clicked {count} times</p>
           <button onClick={() => setCount(count + 1)}>
            Click me
            </button>
        </div>
      );
    }

useState is a new way to use the exact same capabilities that this.state provides in a class.
square brackets("[]") is a JavaScript syntax called "array destructing". It is used for It means that we’re making two new variables "count" and "setCount".
The only argument to the useState is the initial state. So in the above example, "0" is the initial state for the variable count.
useState returns an array of two values the current state value and the function/method that can be used to update the state. So in the above example, it returns two values count and setCount.

useEffect

useEffect Hook is to eliminate the side-effects of using class-based components. This hook is the ideal place to set up listeners, fetching data from API and removing listeners before the component is removed from the DOM.

The useEffect hook is the combination of componentDidMount(run only once when the component is inserted into the DOM tree structure) componentDidUpdate(run something on each render), and componentWillUnmount (run when the component will be removed from the DOM tree) class lifecycle methods.

let's see an example

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect placing inside the component lets us access the count state variable (or any props) right from the effect.
useEffect runs both after the first render and after every update.
useEffect doesn’t block the browser from updating the screen.

Conclusion

So, we can say that hooks are added to React to use "state" within the functionals components instead of using classes.

Hopefully, useState and useEffect is a bit clear by now. If any queries regarding this write them down below. Thank you for your time and I hoped my blog is helpful for you.

Happy Learning!!