Create a Dot Navigation Component in React with Typescript.

In this Content, we will see how to develop a component in react.

Installation

To start a new Create React App project with TypeScript, you can run:

npx create-react-app my-app --template typescript

# or

yarn create react-app my-app --template typescript

After installation is done, open this project in your Code Editor, I prefer to use VSCode.

For styling component I am using styled-component.

yarn add styled-components
yarn add @types/styled-components

Next Step

Create a tsx file in your src folder named DotNavigation.tsx

export const DotNavigation = () => {
  return (
    <div>

    </div>
  );
}

the above Component will be responsible for handling the all dots.

🤔 How can I add circular dots?

💡 let me create a new styled component.

///1
import styled from "styled-components";

///2
export const Dots = styled.button`
  /// 3
  outline: none;
  border: none;
  width: 20px;
  height: 20px;
  margin: 8px;
  border-radius: 50%;
`;

1. First import styled from styled-components package.
2. Create a constant for creating dots.
3. Adding some css properties to the Dot

Lets use these dots in DotNavigation component.

export const DotNavigation = () => {
  return (
    <div>
      <Dots />
    </div>
  );
}

The above snippet will creating only single circle with default background.

Let's add more feature on Dots.

///1
interface IDotState {
  active: boolean;
}

///2
export const Dots = styled.button<IDotState>`
  ....

  ///3
  background: ${(props: IDotState) => 
                (props.active ? "blue" : "gray")};
`;

1. Created a custom prop interface with a bool value that will track the current dot is selected or not.
2. Pass the Props type in the Dots component.
3. Set the background color based on the *active props* state.

Now use this prop in DotNavigation.

export const DotNavigation = () => {
  return (
    <div>
      <Dots/>
      <Dots active/>
    </div>
  );
}

Next Step is add more dots:

export const DotNavigation = () => {

  /// 1
  const count = 3; 

  /// 2
  const data: Array<{ id: string }> = [];

  /// 3
  for (let index = 0; index < count; index++) {
    const object = {
      id: index.toString()
    };

    /// 4
    data.push(object);
  }

  /// 5
  const [activeDot, setActiveDot] = React.useState(0);

  return (
    <div>
      /// 6
      {data.map((item, i) => (
        <Dots
          /// 7
          onClick={() => { setActiveDot(i) }}
          /// 8
          active={i === activeDot}
          key={i.toString()}
        />
      ))}
    </div>
  );
}

1. Set the total count of Dots that want to display.
2. Initialize a data array.
3. Iterating the loop for array creation.
4. Pushing each element in the array.
5. Using hooks to track the current dot element.
6. Iteration and creating the Dots in react render.
7. Addin onclick of each Dots so that will track the selected dots.
8. Set the current dot activated.

🎉 It's working !!!

Many thanks for reading this content.
Umesh