I've been working on adding new features to Gauge Generator for a while now. The version 2 of the product is now [live](https://veerasundar.com/gauge-generator).

[![Gauge Generator](https://veerasundar.com/gauge-generator/gauge.png)](https://veerasundar.com/gauge-generator)

I have added support for semi circle, arc shapes along with the circle shape. Now, a label can also be added next to the Gauge. User can pick a gauge from the template gallery and then customize them as per their wish.

Once the gauge is done, user can either copy the image to clipboard, download as an PNG file or view/copy the SVG source code that they can use in their design tools.

Happy Gauging!


Launched Version 2 of Gauge Generator

If you need to access the URL parameters inside your React application, without using any external libraries such as React Router, then read on.

## URL or Query Params

URL parameters, also known as query parameters, are the key value pairs that are set as part of the URL. For example, in the URL `https://example.com?foo=bar&zoo=car` the variables `foo` and `zoo` are the parameters and `bar` and `car` are their respective values.

## Reading URL Params

We can use the built-in `URL` object to access the URL params in our react application.

```javascript
// https://example.com?foo=bar&zoo=car&moo
useEffect(() => {
    const url = new URL(document.location);
    const params = url.searchParams;
    console.log(params.get("foo")); // prints "bar"
    console.log(params.get("zoo")); // prints "car"
    console.log(params.get("moo")); // prints ""
    console.log(params.get("random")); // prints null
  }, []);
```

In the above code, we construct a new `URL` object by passing the current document's location. Then by using the `searchParams` property, we can access the query parameters. If any value is set for the given parameters, then a String representation of the value is returned. If no value is set, but the parameter is present in the URL, then an empty string is returned. If no parameters is found in the URL, then `null` is returned.

## Reading an array of values from URL params

When you set multiple values under a same name, then you can read them as an array. To do this, instead of `get` method, use `getAll` then you will get back an array.

```javascript
// https://example.com?foo=bar&foo=car&moo
  useEffect(() => {
    const url = new URL(document.location);
    const params = url.searchParams;
    console.log(params.getAll("foo")); // prints ['bar', 'car']
  }, []);
```

## Setting a URL param

You can use `URLSearchParams` interface to manipulate the URL parameter values and then use it to set the new values in the current URL. For example:

```javascript
  const sp = new URLSearchParams(document.location.search);
  sp.set(keyName, 'newValue');
  document.location.search = sp;
```

This will cause a page reload and when it reloads, the new page will have the URL param set.

## Creating a reusable React hook to read URL parameter

Let's extract these reading and updating query param logic as simple React hook, so it can be reused.

```jsx
import { useEffect, useState } from "react";

function useQueryParam(keyName) {
  const [value, setValue] = useState();
  useEffect(() => {
    const url = new URL(document.location);
    const params = url.searchParams;
    setValue(params.get(keyName));
  }, []);
  const setParamValue = (newValue) => {
    const sp = new URLSearchParams(document.location.search);
    sp.set(keyName, newValue);
    document.location.search = sp;
  };
  return [value, setParamValue];
}
```

And, here's how you will use the newly created React hook.

```jsx
import { useEffect, useState } from "react";
  export default function App() {
      const [foo, setFoo] = useQueryParam("foo");
      const [zoo] = useQueryParam("zoo");

      const handleClick = () => {
        setFoo(new Date().getTime());
      };

      return (
        <div className="App">
          <h1>Query Params: {foo} {zoo}</h1>
          <button onClick={handleClick}>Set</button>
        </div>
      );
}

```

How to get and set URL params in React application


While building the [landing page of Mindsaha](https://mindsaha.com), I needed a way to show a text using typewriter effect. Here is the final outcome.

[![React Typewriter effect](/img/typewriter-effect.gif)](https://mindsaha.com)

Here's how I approached the problem and implemented a solution.

## Designing a React Typewriter component

If you think about what a Typewriter component should do, it comes down to these points.

1. The component accepts a `text` prop.
2. It then displays the characters in the given `text` one by one in certain duration (i.e. 500ms). This simulates the typing effect.
3. Once the full text has been displayed, it waits for some time.
4. Finally, it clears the whole text, again one by one.

Once the text is cleared, the effect is done. The component then may switch to the next text or just repeat the whole process again.

With this initial design, let's get into the coding.

## Coding the Typewriter component in React

```jsx
import React, { useEffect, useState } from "react";

const TYPING_SPEED = 100;
const SHOW_TIME = 2000;
const DEL_SPEED = 25;

function TypeWriter({ text }) {
  const [display, setDisplay] = useState(" ");

  const [typing, setTyping] = useState(true);
  // type the characters one by one
  useEffect(() => {
    if (!text || !text.trim().length) return;
    let typingTimer;
    if (typing) {
      let idx = 0;
      typingTimer = setInterval(() => {
        if (idx <= text.length) {
          setDisplay(text.substring(0, idx));
          idx++;
        } else {
          // when all characters are typed, after SHOW_TIME set clear flag
          clearInterval(typingTimer);
          setTimeout(() => {
            setTyping(false);
            setClearing(true);
          }, SHOW_TIME);
        }
      }, TYPING_SPEED);
    }

    return () => {
      clearInterval(typingTimer);
    };
  }, [text, typing]);

  // clear the characters one by one
  const [clearing, setClearing] = useState(false);
  useEffect(() => {
    let clearTimer;
    if (clearing) {
      let idx = text.length - 1;
      clearTimer = setInterval(() => {
        if (idx >= 0) {
          setDisplay(text.substring(0, idx));
          idx--;
        } else {
          // when all characters cleared, reset and invoke the callback
          clearInterval(clearTimer);
          setClearing(false);
          setTyping(true);
        }
      }, DEL_SPEED);
    }
    return () => {
      if (clearTimer) {
        clearInterval(clearTimer);
      }
    };
  }, [clearing, text]);
  return <span>{display || text[0]}</span>;
}
export default TypeWriter;
```

## Typewriter text effect - Demo

Here is the demo of the above component. Feel free type in new text and animate.

<TypeHolder />

## Question to you?

What do you think about this implementation? If it is up to you, how would you go about it? Also, can you think of how the blinking cursor has been done, as seen in the [Mindsaha landing page](https://mindsaha.com)?


How to create Typewriter text effect in React


By this time, you might already know about [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API). In short, they provide mechanism for animating transition between two DOM states. For example, if you want to smoothly transition from one page to another page, you can do so with view transitions API.

In the past, I had implemented [page transitions using React Transition Group](https://veerasundar.com/blog/how-to-animate-page-transition-in-react-using-styled-components/). It seemed little complex to understand, and it didn't work well with accessibility. Now that browsers provide an in-built API to do the page transitions, it's time to update.

There's a great example in Chrome for Developers page that shows [how to implement the view transitions API](https://developer.chrome.com/docs/web-platform/view-transitions). In this blog post, let me show you a simple implementation in my blog that uses Next.js.

## Before View Transitions

As you can see in the below GIF image, when I navigate to different pages in my blog, the browser loads the new page without anu smooth animation.

![page navigation without any transition](/img/before-transition.gif)

## After View Transitions

Let's take a look at the same page navigation, but this time with view transitions added. (_The animation is not smooth, because of GIF, but in browser it will be butter smooth.)_

![page navigation with view transitions](/img/after-transition.gif)

## View Transition Implementation in Next.js application

I use Next.js to build my blog. Next.js provides a `Link` component to render hyperlinks and navigate to the pages. We can wrap this `Link` component in our custom `LinkTransition` component that enables the view transition.

```jsx
// LinkTransition.jsx

import Link from "next/link";
import { useRouter } from "next/navigation";

function LinkTransition(props) {
  const router = useRouter();
  const handleClick = (e) => {
    if (!document.startViewTransition) {
      // browser does not support view transition. Continue the default behavior.
      return;
    } else {
      // browser supports view transition. Animate the transtion.
      e.preventDefault();
      document.startViewTransition(() => {
        router.push(props.href);
      });
    }
  };

  return (
    <Link onClick={handleClick} {...props}>
      {props.children}
    </Link>
  );
}
export default LinkTransition;
```

Once we have this component, you can use it in place of `Link` component to have the page navigation transitioned.

## Customizing the transition animation

By default, the view transition API just fades in / fades out the DOM elements. But you can customize the animation via CSS, by applying animations to `::view-transition-old` and `::view-transition-new` pseudo-elements. For example, here is a sliding animation, taken from [Chrome Web Developer page](https://developer.chrome.com/docs/web-platform/view-transitions).

```css
/* global.css */

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes slide-from-right {
  from { transform: translateX(30px); }
}

@keyframes slide-to-left {
  to { transform: translateX(-30px); }
}

::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
```

## Conclusion

Implementing page transitions have never been this much easier - thanks to View Transition API. [Not all the browser supports](https://caniuse.com/mdn-api_viewtransition) it yet, but until they do, we can progressively enhance the user experience in browsers that do support it (Chrome / Edge).


Implementing view transitions in a Next JS application using React


Recently, I had a requirement to create lines using SVG for my [home page](https://veerasundar.com) design. I couldn't hard code all the SVG line elements in my JSX since the number of lines were dynamic and I needed to do some positioning logic as well.

## Failed code

So I ended up with a simple `useEffect` code that runs once after everything renders and append the SVG lines.

```jsx
useEffect( () => {
  const svgElm = document.querySelector("#svgHolder");
  const lineElm = document.createElement("line");
  lineElm.setAttribute("x1", "20");
  // ... set other attributes
  svgElm.appendChild(lineElm);
}, []); // run once
```

The above code added the `line` tags to the `svg` element. However, it did not render anything at all on screen. The nodes were present in DOM, but nothing shows up on screen.

## document.createElementNS

It turns out I need to create the `line` element under a specified name space using the DOM API `document.craateElementNS`. SO once I change `document.createElement` with `document.createElementNS` and the right namespace, my SVGs were rendering properly.

```jsx
useEffect(() => {
  const svgElm = document.querySelector("#svgHolder");

  /* use proper namespace to create line element */
	const lineElm = document.createElementNS(
          "http://www.w3.org/2000/svg",
          "line",
        );

  lineElm.setAttribute("x1", "20");
  svgElm.appendChild(lineElm);
}, []);
```

How to create SVGs programmatically in React


In my React application, I needed a way to pass custom variables from my JavaScript code to my CSS code. For example, I want to do this:

```javascript
function DemoApp() {
  return <MyCustomButton marginTop={"10px"} />;
}
```

Then, `MyCustomButton` will need to set its margin top to `10px`. So, I need a mechanism to take the props values and pass it down to CSS and set it. Let's see how it's down. I am using [CSS Modules](https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/) in my React app, btw.

```javascript
/** my-custom-button.js **/
import styles from "./my-custom-button.module.css";
function MyCustomButton() {
  return <button className={styles.button}></button>;
}
```

## Defining CSS variables

To use dynamic values in CSS, one approach is through [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). I can define a CSS variable as `--my-var: 10px` and then access it with `margin-top: var(--my-var);`. So for mt `MyCustomButton` component, I defined the required CSS variables first.

```css
/* my-custom-button.module.css */
.button {
  /* these variables will be used later to set from JavaScript */
  --marginTop: 0;
  --marginBottom: 0;

  margin-top: var(--marginTop);
  margin-bottom: var(--marginBottom);
}
```

Now that I have my CSS variables defined, next step is to set them.

## Setting CSS variables from React component

I can pass `style` object to JSX that react will apply to the underlying element. I need to construct this `style` object with all the variables that I want to set.

```javascript
/** my-custom-button.js **/
import styles from "./my-custom-button.module.css";
function MyCustomButton(props) {
  return (
    <button
      className={styles.button}
      style={{
        "--marginTop": props.marginTop,
        "--marginBottom": props.marginBottom,
      }}
    ></button>
  );
}
```

This way, I can pass in whatever the custom props to the underlying CSS variable.

## Using the utility method to construct the style object

Manually constructing the `style` object will not scale well if you have 10s of custom attributes. In such cases, we can write a simple function that construct the `style` object for us. We can also add any validation to the code.

```javascript
/** my-custom-button.js **/
import styles from "./my-custom-button.module.css";

/**
 *
 * @param props react props object with key, value pairs
 * @param variableNames array of names, for ex. ['marginTop', 'marginBottom']
 * @returns a object such as {"--marginTop": "10px", "--marginBottom": "10px"}
 */
function propsToCSSVariable(props, variableNames) {
  return variableNames.reduce((acc, key) => {
    if (props[key] !== undefined) {
      acc[`--${key}`] = props[key];
    }
    return acc;
  }, {});
}

const cssVariableNames = ["marginTop", "marginBottom"];
function MyCustomButton(props) {
  return (
    <button
      className={styles.button}
      style={propsToCSSVariable(props, cssVariableNames)}
    ></button>
  );
}
```

With this approach, now I can completely customize my React components with JavaScript and CSS.

If you are following any other techniques, please do let me know.


Setting CSS variables from a React app


Remember [Gauge Generator](https://veerasundar.com/gauge-generator/) app? I initially [wrote it](https://veerasundar.com/blog/building-a-radial-gauge-with-svg-and-react-part-2/) using React classes and then [optimized it's performance](https://veerasundar.com/blog/optimizing-performance-of-an-react-app/) using React PureComponent.

Now let's see how it can be rewritten using the talk-of-the-react-town - [Hooks](https://reactjs.org/docs/hooks-intro.html).

## What the hook?

![Use React Hook](https://i.imgur.com/NXf394H.png)

Put it simply, **Hooks** lets you to use state and other react features in your function components. For example, if you need state, you can use [useState](https://reactjs.org/docs/hooks-state.html) hook. And, if you need context, you can use [useContext](https://reactjs.org/docs/hooks-reference.html#usecontext).

Apart from the [built-in hooks](https://reactjs.org/docs/hooks-reference.html), you can create your own custom hooks and share the functionality across your React components (remember mixins, but a LOT better than that).

You can get an [overview of React hooks](https://reactjs.org/docs/hooks-intro.html) or if you are really interested, do a [deep dive](https://overreacted.io/a-complete-guide-to-useeffect/) in Dan's blog.

Let's get on to our business - convert a React class component that uses State to a function component using Hooks.

## React class component with State

The component that I am going to use is the [`InputColor`](https://github.com/vraa/gauge-generator/blob/master/src/components/input-color.js) of [Gauge Generator app](https://veerasundar.com/gauge-generator/). This component wraps the `SketchPicker` color picker tool and let the user to select a color from the pop-up. It has one state variable - `pickerOpen` to indicate if the pop-up is opened or not.

For brevity, I omitted some code of this class.

```javascript
import React, { PureComponent } from "react"

class InputColor extends PureComponent {
  state = {
    pickerOpen: false
  }

  togglePicker = () => {
    this.setState(state => ({ pickerOpen: !state.pickerOpen }));
  }

  render() {
    const { pickerOpen } = this.state;
    return (
      <div>
        Picker State: {pickerOpen ? "Open" : "Closed"}
        <button onClick={this.togglePicker}>Toggle</button>
      </div>
    );
  }
}
```

Here we have a simple React component, written as a Class and holds a State variable. To convert this into a functional component with hooks, lets determine the state we need to track. In our case, we need to track a single `pickerOpen` boolean value in state. We can use `useState` hook for this purpose.

## useState hook

`useState` function takes in an initial value of the state and returns two values: `[currentStateValue, callbackToSetStateValue]`

So, in our case, we can convert the state and its modified method as below:

### Refactoring state

```javascript
/* Before refactor */
state = {
  pickerOpen: false
}

togglePicker = () => {
  this.setState(state => ({ pickerOpen: !state.pickerOpen }));
}

/* After refactor using useState hook */
const [pickerOpen, setPickerOpen] = useState(false);
const handlePickerButtonClick = e => {
  setPickerOpen(!pickerOpen);
}
```

If you notice, we got rid of using `this` in the refactor. Because, in functional component, you don't need to use `this` and all the functions / variables are wrapped in closures, so you can directly access them.

With this change, now whenever you update the state value using `setPickerOpen` callback, React will re-render your whole component again.

Now that we have our state built, it's time to use it in our render logic.

### Refactoring render
```javascript
const [pickerOpen, setPickerOpen] = useState(false);
const handlePickerButtonClick = e => {
  setPickerOpen(!pickerOpen);
}
return (
  <div>
    Picker State: {pickerOpen ? "Open" : "Closed"}
    <button onClick={handlePickerButtonClick}>Toggle</button>
  </div>
);
```

## Putting it all together

We have our state and render function, lets wrap it in a functional React component:

```javascript
const InputColor = () => {
  const [pickerOpen, setPickerOpen] = useState(false);
  const handlePickerButtonClick = e => {
    setPickerOpen(!pickerOpen);
  }
  return (
    <div>
      Picker State: {pickerOpen ? "Open" : "Closed"}
      <button onClick={handlePickerButtonClick}>Toggle</button>
    </div>
  );
}
```

No more classes! yay!!

## Hey, what about the performance?

React will re-render your function component when ever there's a change in the prop values. In Class component, we have `PureComponent` or `shouldComponentUpdate` to [help us with avoiding re-renders](https://veerasundar.com/blog/optimizing-performance-of-an-react-app/). `PureComponent` will do a shallow comparision and using `shouldComponentUpdate`, you can write your own comparison logic.

But, How can we do the same in the function component? `React.memo`.

Just wrap your function component with `React.memo` and you will get the functionality of `PureComponent` in here.

For example,

```javascript
const InputColor = React.memo( ({value}) => {
  /* ... other logic ...*/
    return <p>{value}</p>
});
```

With this change, React will not re-render our `InputColor` component, if the passed in `value` did not change.

## Conclusion

In this post, I touched upon the very basic of React hooks - `useState`. In the coming articles, lets dive further and refactor our [Gauge Generator](https://veerasundar.com/gauge-generator/) app using some advanced hooks concept. Hang tight!


Rewriting a React Component using Hooks and React.Memo


Some time back, I built [Gauge Generator](https://veerasundar.com/gauge-generator/) as a weekend project. This app helps to create custom gauges and export them as SVGs to be used in a dashboard design projects. It was built using React framework and create-react-app tool.

[![Gauge Generator](https://camo.githubusercontent.com/af4950bea23bb576ecd36bb60a1a8cdf6414a1c3/68747470733a2f2f692e696d6775722e636f6d2f7664484a42464d2e706e67)](https://veerasundar.com/gauge-generator/)

Since it was a fun little weekend project, I did not spend much time on optimizing it. As the app now complete, I thought it's a good time to take another look at its performance and optimize it if necessary.

## Measuring React app performance

"If you can't measure it, you can't improve it". So, we need to first see where the issue is in order to fix it.

Measuring React app performace is not difficult. React uses [User timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API) to log performance metrics which we can easily look into via browser's developer tools.

Additionally, we can use [React Developer tools](https://github.com/facebook/react-devtools) _Higlight Updates_ feature to visually see which React components are rendered as the app state changes thus figuring out which components are rendered unnecessarily.

### 1. Finding wasted renders

First enable "Highlight Updates" in React Developer tools preference. Now interact with your app and you will see the components are highlighted.

![Highlight updates of React app](https://i.imgur.com/noeyRQe.gif)

In the above recording, you can see lots of boxes displayed around components as I increase the slider value. You can also notice that even though I only make change in one React component, it triggers updates in all other react components as well. Ideally, as I change Gauge value, I want only the Gauge and the Gauge value component to get updated, not the whole app.

### 2. Measuring wasted renders

Now we know that our app renders components unnecessarily, lets measure how much CPU cycles are getting wasted.

Open Chrome Dev tool's Performance tab and record the app as you increase the slider value. But before doing this, disable any React addons in the browser, as they may impact our measurements. Record the measurements for less than 10 seconds, else the Chrome might hang. For our case, recording for 3 seconds is more than enough. After the recording stopped, Chrome will open the detailed report (click to enlarge).

[![React app performance metrics](https://i.imgur.com/Os0VaVe.png)](https://i.imgur.com/Os0VaVe.png)

When you focus on one single render cycle, we can see that the component `InputColor` and `InputField` are getting updated and taking almost 90ms for each render cycle. This render is unnecessary and can be optimized.

## Optimizing the React app performance

Now we know where the bottleneck is. We need to avoid rendering components unless it is _really_ needed. In our case, the problem lies on these two components - `InputColor` and `InputField`. We can go about fixing these components in two ways.

1. Using `shouldComponentUpdate` method, you can determine if a component needs to be updated/rendered as its state/prop changes. You can manually compare React component's next state/props with currect state/props and return either `true` or `false` to let React know to update or not.
2. Or, by Using `PureComponent`, you can let React to do the shallow comparison of state/props values. This is a recommended approach as it saves us from doing manual comparison.

So, I updated both `InputColor` and `InputFields` components to extend from `PureComponent` instead of `Component`.

```javascript
import React, { PureComponent } from "react";

class InputColor extends PureComponent {
  /*  code here */
}

class InputField extends PureComponent {
  /*  code here */
}
```

Below is how the application rendered after making the above change. If you see, now there are no unnecessary renders as I slide the Gauge value. Only the top level components are re-rendered.

![using PureComponent of Reat helps improve performance](https://i.imgur.com/Dddziqp.gif)

Perfect! With a simple fix, we were able to reduce the number of rendered components to a minumum. To confirm the improvment, lets measure the metrics and see (click to enlarge).

[![React app improved performance metrics](https://i.imgur.com/fFn559t.png)](https://i.imgur.com/fFn559t.png)

If you compare the above results with the previous measurement, you can clearely see we have no calls to `InputColor` or `InputField` is made, thus saving around 90ms for each render cycle.

## Conclusion

In most cases, switching to use `PureComponent` or manually defining `shouldComponentUpdate` will always result in performance improvment. But you need to make sure that when a state changes, you don't mutate the object, but instead you always return a new object. This is because the `PureComponent` does a shallow comparision, so if you mutate a nested property, it won't be able to detect the change, hence it won't re-render your component. So, just be sure not to mutate state.

Apart from using `PureComponent`, breaking large component into small components and passing the state as props to them will also help in saving wasted renders. Just make sure you only pass the props that is specifically needed by the small components. This way, `PureComponent` will get to compare the prop change and avoid rendering if necessary.




```


Optimizing performance of a React app


While building the next version of [RoutePlanGo](https://routeplango.com), I needed a way to animate the page transition when the user navigates to different URLs in the app. [RoutePlanGo](https://routeplango.com) is built using React and Styled Components and uses React Router for URL handling. This article explains how to use the React Transition Group to implement the page transition animation in the app.

## What are we building?

Here's the example of page transition animation that we are building. This example app has Home page and Details page. When the user goes to details page, it slides in the page and updates the URL. And, when the user goes back, it slides out the details page and slides in the home page for a smooth UI experience.

![Page Transition](https://i.imgur.com/Refk1JQ.gif)

You can see the code and the example live in here: [https://codesandbox.io/s/lrxmv7304l/](https://codesandbox.io/s/lrxmv7304l)

## 1. Setting up the application

For this example, we need to have a react application. You can either use "create-react-app" in your local, or use [Code Sandbox](https://codesandbox.io/s/new) in the cloud to setup a simple react application.

Once you have the react app, please install the following modules:

```shell
# to handle CSS styles
npm install styled-components --save
# to handle URL routing
npm install react-router-dom --save
# to apply animation on component transition
npm install react-transition-group --save
```

Our demo app has these components: **App**, starting point and handles route transition between pages, **HomePage** and **DetailsPage** to demonstrate the individual pages.

### App component

This is the starting point of our app and contains the page transition logic. Since, this component sits at the top level and hosts the individual pages, it makes sense to keep the page transition logic in here.

```javascript
// Styled component to host the app.
const PageContainer = styled.div`
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #e3f2fd;
  font-family: "Open Sans", sans-serif;
`;

// Starting point of our app
function App() {
  return (
    <Router>
      <Route
        render={({ location }) => {
          return (
            <PageContainer>
              <TransitionGroup component={null}>
                <CSSTransition
                  timeout={300}
                  classNames="page"
                  key={location.key}
                >
                  <Switch location={location}>
                    <Route exact path="/details" component={DetailsPage} />
                    <Route exact path="/" component={HomePage} />
                  </Switch>
                </CSSTransition>
              </TransitionGroup>
            </PageContainer>
          );
        }}
      />
    </Router>
  );
}
```

The App component is a pretty standard React component that uses React Router to navigate to different components based on the matching URL. But the important section in the `TransitionGroup` and `CSSTransition`. Note, how we wrap the individual routes within these two higher order components.

The `TransitionGroup` and `CSSTransition` tracks the underlying components life cycles (mounting and un-mounting) and applies the given class name (in this case, `page`), suffixing the current transition state name. We can use this class name to define our transition animations.

For example, when the `HomePage` is mounted, it will have the class name `page-enter` added to it. Similarly, when it is getting unmounted (for example, when the user navigates to `DetailsPage`), it will have `page-exit` class name applied and the `DetailsPage` will have `page-enter` added to its class list.

### HomePage component

`HomePage` contains some text and a link to navigate to `DetailsPage`.

```javascript

// animation to slide in the home page from left
const slideInLeft = keyframes`
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
`;

// animation to slide out the home page to the left
const slideOutLeft = keyframes`
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
`;

const Page = styled.div``;

// apply the correct animation based on the transition state class name.
const HomePageElm = styled(Page)`
  &.page-enter {
    animation: ${slideInLeft} 0.2s forwards;
  }
  &.page-exit {
    animation: ${slideOutLeft} 0.2s forwards;
  }
`;

function HomePage() {
  return (
    <HomePageElm>
      <h2>Home Page</h2>
      <Link to="/details">Go to Page Two →</Link>
    </HomePageElm>
  );
}
```

Again, the `HomePage` component is pretty standard React component. But look at how we define the animations and apply the animation on the component level based the transition state class names. Especially,

```javascript
const HomePageElm = styled(Page)`
  &.page-enter {
    animation: ${slideInLeft} 0.2s forwards;
  }
  &.page-exit {
    animation: ${slideOutLeft} 0.2s forwards;
  }
`;
```

Also, make sure that your animation timings is less than or equal to the `timeout` prop of `CSSTransition` component. If it doesn't match, your animation may look janky. Play around with these timings to have a smooth animation.

The same logic applies to the `DetailsPage` component as well. We just need to replace the correct animations. You can view this example and the complete code in live here: [https://codesandbox.io/s/lrxmv7304l](https://codesandbox.io/s/lrxmv7304l)


How to animate page transition in React using styled components


Creating a Chrome extension in React is no different than creating one in vanilla JavaScript. After all, it's all JavaScript in the end. But we just need to keep few details in our mind. In this post, let's see how to create a simple Chrome extension with React.

## 1. Creating and setting up a React application

For this, we are going to use `create-react-app` tool, as it makes it easy to get started with React. In your command line, go to your workspace directory and run `npx create-react-app chrome-react-extension`. This will setup a sample React application named "chrome-react-extension", with all the build steps built in.

Once you have the basic react app created, run `yarn start` to make sure the application is working fine. If all good, you will see a browser page, loaded with the React app.

Now, let's move on to configuring this app to make this as an Chrome extension.

## 2. Configuring React app to work as a Chrome extension

A Chrome extension requires a `manifest.json` file to be present in root directory of the extension. Luckily, our `create-react-app` already has one. We just need to add few details in it to make it compatible with Chrome's `manifest.json` spec.

Open the file `[PROJECT_HOME]\public\manifest.json` and add the following code to it. The file should already contain other entries and that's fine, just add the code at the end of it.

```javascript
{
    /* ... other values */
    "version": "1.0",
    "manifest_version": 2,
    "browser_action": {
        "default_popup": "index.html"
    }
}
```

Also, the file will have some default entries for `icons`, but this is not compatible with the Chrome's `manifest.json` format. You can either update this to comply with ["icons" format](https://developer.chrome.com/apps/manifest/icons) or just remove the entry as we do not need it for our extension to work.

And, that's it. That's all you need to do to get out React app working as a Chrome extension. Build this app as you normally build a react app with `yarn build`. This generates the app and place the files inside `[PROJECT_HOME]\build`.

Now, let's install it in Chrome.

## 3. Adding React app extension to Chrome

In Chrome, go to `chrome://extensions` page and switch on *developer mode*. This enables the ability to locally install a Chrome extension.

![Chrome extension developer mode](https://i.imgur.com/MqJDzXz.png)

Now either click on the *LOAD UNPACKED* and browse to `[PROJECT_HOME]\build` or just drag and drop the `build` folder. This will install the React app as a Chrome extension.

![React app as Chrome extension](https://i.imgur.com/enqysM3.png)

Yay! We just installed our React app as a Chrome extension. When you click the extension icon (the auto generated one), you will see the React app, rendered as a extension popup.

![React app opened as Chrome extension](https://i.imgur.com/l4xV1xZ.png)

## 4. Making changes and debugging the extension

You can continue to make changes to your React app and do a build. To refresh the changes in your browser, just click on the `Reload` button on your extension's tile in `chrome://extensions` page. This will automatically pull changes from your build folder and re-install the extension.

![Reload chrome extension changes](https://i.imgur.com/OwIK98U.png)

And, to [debug the extension in browser](https://developer.chrome.com/apps/tut_debugging), you can either right click the extension icon and select *Inspect popup* or once the popup is opened, right click in it and select *Inspect*. This wll open the developer console, where you can inspect console logs, network traffic, local storage, etc.

## 5. Injecting a React app to page as content script from Chrome extension

So far we used React to render the extension popup. For some extensions, you may also need to render some UI to any underlying page. Chrome extension uses `content_scripts` for this. Using `content_scripts`, you can mention a JS and CSS file in `manifest.json`, that needs to be *injected*` into the underlying page. Then this script will have access to the page DOM and can do the normal DOM manipulation.

But the problem with our `create-react-setup` is that the build step will generate the output JS file in different name each time (if the content changed). So we have no way to know the actual file name of the JS file, hence we can't mention in it in our `manifest.json` file.

To workaround this problem, you can always add a static JS file under the `public` folder and when built, this JS fill will be part of the `build` folder. Then you can use this file name as your `content_script` entry point. But then, this file will not be part of React / Webpack build pipeline so you either have to setup your own build or settle for a vanilla JS in here.

As another workaround, you can just eject out of `create-react-app` and modify the webpack configuration by hand to either retain the generated file name or create a separate entry point for content script.

Let's do this.

## 6. Ejecting create-react-app and configuring content scripts

First run `yarn run eject` on the command line. This will eject `create-react-app` and then will create all necessary build scripts inside your project folder. Once ejection is done, go to `[PROJECT_HOME]\config\webpack.config.prod.js` file and make the following changes in it:

Change the option `entry` to have multiple entry points. Here, our content script will be named as `content.js`.
```javascript
entry: {
    app: [require.resolve('./polyfills'), paths.appIndexJs],
    content: [require.resolve('./polyfills'), './src/content.js']
},
```

Also, Search for `.[contenthash:8]` and remove it from both CSS and JS output file name. This will ensure the generated file will not have a random hash in it, thus we can mention the file name in our manifest JSON.

Once you made the above changes in the `webpack.config.prod.js` file, now its time to create the content script file. Create a file named `content.js` and `content.css` inside the `src` folder.

```javascript
/* src/content.js */
import React from 'react';
import ReactDOM from 'react-dom';
import "./content.css";

class ContentReact extends React.Component {
    render() {
        return (
            <div className={'react-extension'}>
                <p>Hello From React Extension!</p>
            </div>
        )
    }
}

const app = document.createElement('div');
document.body.appendChild(app);
ReactDOM.render(<ContentReact />, app);
```

```css
/* src/content.css */
.react-extension {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: grid;
    align-items: center;
    justify-items: center;
    background: rgba(0,0,0,.4);
}

.react-extension p {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
}
```

Now that we have configured React build pipeline and created our content scripts, lets update `manifest.json` to pick up these files. Add the following code to `manifest.json` file.

```json
"content_scripts" : [
    {
      "matches": ["https://reactjs.org/*"],
      "css": ["/static/css/content.css"],
      "js": ["/static/js/content.js"]
    }
  ]
```

Note that how we refer the JS and CSS file. Also, with `matches` option, we are injecting this content script only to the React JS website. But you can inject any website you want, just by adjusting the matching pattern.

Now build your app, go to `chrome://extensions` and reload the extension. After this, when you go to https://reactjs.org website you should see our extension injected model there.

![Content Script injected as a React App](https://i.imgur.com/Y7Dsawh.png)

This brings the end of this article. Feel free to let me know if there are questions.

How to create a Chrome extension in React JS


Few years back, I wrote a small program in Java for the [Mars Rover](https://veerasundar.com/blog/mars-rover-in-java/) problem. Now that I am completely moved away from Java to JavaScript / React land, thought to rewrite that in JavaScript. So, here it goes:

## Mars Rover problem:

A squad of robotic rovers are to be landed by NASA on a plateau on Mars.

This plateau, which is curiously rectangular, must be navigated by the rovers so that their on-board cameras can get a complete view of the surrounding terrain to send back to Earth.

A rover's position and location is represented by a combination of x and y co-ordinates and a letter representing one of the four cardinal compass points. The plateau is divided up into a grid to simplify navigation. An example position might be 0, 0, N, which means the rover is in the bottom left corner and facing North.

In order to control a rover , NASA sends a simple string of letters. The possible letters are 'L', 'R' and 'M'. 'L' and 'R' makes the rover spin 90 degrees left or right respectively, without moving from its current spot. 'M' means move forward one grid point, and maintain the same heading.

Assume that the square directly North from (x, y) is (x, y 1).

### INPUT:

The first line of input is the upper-right coordinates of the plateau, the lower-left coordinates are assumed to be 0,0.

The rest of the input is information pertaining to the rovers that have been deployed. Each rover has two lines of input. The first line gives the rover's position, and the second line is a series of instructions telling the rover how to explore the plateau.

The position is made up of two integers and a letter separated by spaces, corresponding to the x and y co-ordinates and the rover's orientation.

Each rover will be finished sequentially, which means that the second rover won't start to move until the first one has finished moving.

### OUTPUT:

The output for each rover should be its final co-ordinates and heading.

INPUT AND OUTPUT

Test Input:

5 5  
1 2 N  
LMLMLMLMM

Expected Output:
1 3 N

## Mars Rover implemented in JavaScript / React

Source: [https://github.com/vraa/marsrover](https://github.com/vraa/marsrover)


Mars Rover in JavaScript, React


So, I built a [React app](https://github.com/vraa/gitflowanimated) to visualize and animate the Gitflow. Basically, in Gitflow,

1. There's a `master` branch.
2. You create a `develop` branch off of `master`. This `develop` branch is your bread and butter as most of your changes go in here.
3. `feature` and `release` branches are created off of `develop`.
4. Once you are done with `feature`, you merge it to `develop`.
5. Once you are done with `release`, you merge it to both `develop` and `master`. And you tag the release.
6. If there's a issue in production, you create a `hotfix` branch off of `master`.
7. Once `hotfix` is done, you merge it back to `master` and `develop` and tag the release.

## Animate the Gitflow

Source: [https://github.com/vraa/gitflowanimated](https://github.com/vraa/gitflowanimated)

Click on the buttons below / next to each branch to simulate the action and see the commits flowing.

<iframe className={"gitflow"} src="https://veerasundar.com/gitflowanimated/"/>


Gitflow - Animated


This post is almost due for one year! Well, better late than never!! :)

In my last post, I explained how you can [build a radial gauge with SVG and React](https://veerasundar.com/blog/building-a-radial-gauge-with-svg-and-react-part-1/). In this post, I will continue to introudce two tools that will help you to build the visual gauge.

## Online Gauge Generator

[![Online Gauge Generator](https://i.imgur.com/bzzfkX9.gif)](https://veerasundar.com/gauge-generator/)

I built an online free tool that you can use to [generate radial gauges](https://veerasundar.com/gauge-generator/). You can customize each and every part of the gauge to your need. Once you are happy with your creation, you can export the generated gauge to a SVG or PNG image files.

## react-radial-gauge NPM module

If you are React developer, then you can make use of the [react-radial-gauge](https://www.npmjs.com/package/react-radial-gauge) npm module in your react application. This module exports a React component to generate radial gauges in your application. You can use the tool as below:

Install the module `npm install react-radial-gauge` and then,

```javascript
import Gauge from 'react-radial-gauge';

class AwesomeComponent extends React.Component {
    render() {
        let opts = {/* Gauge customization */}
        return (
            <Gauge {...opts} />
        )
    }
}
```

Here You can find the [source code and documentation of react-radial-gauge](https://github.com/vraa/react-radial-gauge).
```


Building a radial gauge with SVG and React - Part 2


While building the [Trader App](https://veerasundar.com/trader), I used SVG in React to build the radial gauge UI widget that displays the profit percentage in a visually appealing manner. The final product looks something like below (you can view the actual widget at [https://veerasundar.com/trader](https://veerasundar.com/trader))

## Final output

As you can see, the gauge has several components.

1. Base dial with point markers.
2. A needle, anchored at center that points the progress.
3. A progress bar, either in red or green dependening on the progress value is in negative or positive.

For simplicity, let's assume the gauge has a width and height of _120px_. With this, let's start building the components one by one.

## SVG Gauge - CSS

We will be using below CSS to style our SVG gauge. Also note that we have rotated the SVG gauge by negative 90 degree using `transform: rotate(-90deg)`, as it is needed to properly position the Gauge.

```css
.radial-gauge {
	background-color: #fff;
	text-align: center;
	padding: 20px 0;
	margin: 20px 0;
}
.radial-progress {
    transform: rotate(-90deg);
    font-family: Verdana, Sans-Serif;
    margin: 0 20px;
}

.radial-progress .tick {
    stroke: #4b5156;
}

.radial-progress .tick.quarterTick {
    stroke: #2b2f32;
    stroke-width: 2;
    opacity: 1;
}

.radial-progress .tick-labels {
    font-size: .6rem;
    fill: #5b6268;
}

.radial-track {
    stroke: #33373b;
    stroke-width: 12;
}

.radial-progress-bar {
    stroke-width: 12;
}

.radial-progress-bar.up {
    stroke: #43A047;
}

.radial-progress-bar.down {
    stroke: #e53935;
}

.needle .point,
.needle .center {
    fill: #2b2f32;
}

```

## SVG Gauge - Base dial

As a first step, we will be building the base dial and the tick markers / labels for our SVG gauge. The output can be seen below.

### Code for the base dial
```html
<svg class="radial-progress" width="120" height="120" viewBox="0 0 120 120">
    <defs>
        <line id="tick" x1="104" y1="60" x2="110" y2="60" stroke-linecap="round"></line>
    </defs>
    <g id="ticks">
        <use class="tick quarterTick" href="#tick" transform="rotate(0 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(10 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(20 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(30 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(40 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(50 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(60 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(70 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(80 60 60)"></use>
        <use class="tick quarterTick" href="#tick" transform="rotate(90 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(100 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(110 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(120 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(130 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(140 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(150 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(160 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(170 60 60)"></use>
        <use class="tick quarterTick" href="#tick" transform="rotate(180 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(190 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(200 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(210 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(220 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(230 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(240 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(250 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(260 60 60)"></use>
        <use class="tick quarterTick" href="#tick" transform="rotate(270 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(280 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(290 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(300 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(310 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(320 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(330 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(340 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(350 60 60)"></use>
        <use class="tick quarterTick" href="#tick" transform="rotate(360 60 60)"></use>
    </g>
    <g id="tickLabels" class="tick-labels">
        <text x="85" y="65" text-anchor="middle" transform="rotate(90 90,65)">0</text>
        <text x="45" y="33" text-anchor="middle" transform="rotate(90 53,35)">50</text>
        <text x="15" y="65" text-anchor="middle" transform="rotate(90 20,65)">100</text>
        <text x="50" y="93" text-anchor="middle" transform="rotate(90 53,95)">50</text>
    </g>
    <circle class="radial-track" cx="60" cy="60" r="54" fill="none"></circle>
</svg>
```

As you can see, we have,

1. Defined a `SVG` element with width and height as 120px. We have also set the `viewBox` as `0 0 120 120` so that our SVG elements are scaled correctly (more about [viewBox](https://www.sarasoueidan.com/blog/svg-coordinate-systems/)).
2. We defined a `#tick` element inside `<defs>` and reused it multiple times, rotating them using `transform=rotate()` according to their corresponding position in the dial. We also placed the labels of ticks using `<text>` and rotated them accordingly as we did for the tick markers.
3. Finally, we drew the base dial using the `<circle>` element.

## SVG Gauge - Progress Bar

Next part would be to add the progress bar, indicating how much profit one have made (both positive / negative).

For example, in above gauges, the first gauge has made a negative -15% profit and the second one made a postive 59% profit. In order to visualize this, we will be using `stroke-dasharray` and `stroke-dashoffset` properties of `circle` element.

### Code for drawing progress
```html

<circle
	class="radial-progress-bar down"
	cx="60"
	cy="60"
	r="54"
	fill="none"
	stroke-dasharray="339.292"
	stroke-dashoffset="364.73889999999994" />

```

You can see I have used the values `stroke-dasharray="339.292"` and `stroke-dashoffset="364.73889999999994"`. To calculate the values, I used the following formuales.

```javascript
	let radius = 54; // radius of our circle
	let progress = 15; // 0-100 range

	strokeDasharray = 2 * Math.PI * radius;
	strokeDashOffset = strokeDashArray * (1 - (progress/200));

```

As you can see the `stroke-dasharray` is nothing but the circumference of the circle and `stroke-dashoffet` is how much gap should be between each strokes. We use this gap to show the progress.

In my case, I needed half the circle to show positive progress and the other half to show negative progress, I divided the progress value by 200 to map it correctly.

## SVG Gauge - Pointer Needles

Next we will be adding the pointer needles to exatly show the progress value inside the gauge (hey, what's a gauge if it doesn't have a needle!?).

### Code to construct the needle
```html
<g id="needle" class="needle">
    <polygon class="point" points="60,50 60,70 120,60" transform="rotate(106.2 60 60)"/>
    <circle class="center" cx="60" cy="60" r="23"></circle>
</g>
```

The needle has two components;

1. The pointer is drawn using `polygon` and it's placed the center of the gauge cirle.
2. And a center cirlce, acting like a base of the needle.

We just need to calculate the rotation angle of our needle and rotate it using center of our SVG as origin (which is 60,60).

```javascript
let progress = 15; // 0-100 range.
let needleAngle = (180 * progress) / 100;

/* transform = rotate(needleAngle centerX centerY) */
```

Note: I am using 180 below because I need to map the progress to only half the circle angle. If I wanted to map it to full circle, I would have used 360 here.

If you want to show your needle moving from 0 to the progress position, you can use `animateTransform`.

```html
<polygon class="point" points="60,50 60,70 120,60" transform="rotate(106.2 60 60)">
	<animateTransform
		attributeName="transform" type="rotate" from="0 60 60" to="106.2 60 60" dur=".5s"
                              fill="freeze"></animateTransform>
</polygon>
```

## SVG Gauge - Assembly

Putting it all together, we will end up with our assembled SVG gauge.

### Full code

```html
<svg class="radial-progress" width="120" height="120" viewBox="0 0 120 120">
    <defs>
        <line id="tick" x1="104" y1="60" x2="110" y2="60" stroke-linecap="round"></line>
        <radialGradient id="radialCenter" cx="50%" cy="50%" r="50%">
            <stop stop-color="#dc3a79" offset="0"></stop>
            <stop stop-color="#241d3b" offset="1"></stop>
        </radialGradient>
    </defs>
    <g id="ticks">
        <use class="tick quarterTick" href="#tick" transform="rotate(0 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(10 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(20 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(30 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(40 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(50 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(60 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(70 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(80 60 60)"></use>
        <use class="tick quarterTick" href="#tick" transform="rotate(90 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(100 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(110 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(120 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(130 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(140 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(150 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(160 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(170 60 60)"></use>
        <use class="tick quarterTick" href="#tick" transform="rotate(180 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(190 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(200 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(210 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(220 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(230 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(240 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(250 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(260 60 60)"></use>
        <use class="tick quarterTick" href="#tick" transform="rotate(270 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(280 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(290 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(300 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(310 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(320 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(330 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(340 60 60)"></use>
        <use class="tick" href="#tick" transform="rotate(350 60 60)"></use>
        <use class="tick quarterTick" href="#tick" transform="rotate(360 60 60)"></use>
    </g>
    <g id="tickLabels" class="tick-labels">
        <text x="85" y="65" text-anchor="middle" transform="rotate(90 90,65)">0</text>
        <text x="45" y="33" text-anchor="middle" transform="rotate(90 53,35)">50</text>
        <text x="15" y="65" text-anchor="middle" transform="rotate(90 20,65)">100</text>
        <text x="50" y="93" text-anchor="middle" transform="rotate(90 53,95)">50</text>
    </g>
    <circle class="radial-track" cx="60" cy="60" r="54" fill="none"></circle>
    <circle class="radial-progress-bar up" cx="60" cy="60" r="54" fill="none" stroke-dasharray="339.292"
            stroke-dashoffset="239.20086"></circle>
    <g id="needle" class="needle">
        <polygon class="point" points="60,50 60,70 120,60" transform="rotate(106.2 60 60)">
            <animateTransform attributeName="transform" type="rotate" from="0 60 60" to="106.2 60 60" dur=".5s"
                              fill="freeze"></animateTransform>
        </polygon>
        <circle class="center" cx="60" cy="60" r="23"></circle>
    </g>
</svg>
```

## SVG Gauge in production

Here's the screenshot from [Trader app](https://veerasundar.com/trader/) where this gauge is used.

[![SVG Gauge](https://camo.githubusercontent.com/c92d3d9cd31ff7ec7f25d052567d14f12e1a097c/68747470733a2f2f766565726173756e6461722e636f6d2f7472616465722e706e67)](https://veerasundar.com/trader/)

In the next post, I will show how to build this SVG Gauge in React component.
```


#react (14)