DEV Community

Umesh Verma
Umesh Verma

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Next Step

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

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

    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

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

Screenshot 2021-01-15 at 7.35.22 PM

🤔 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%;
`;
Enter fullscreen mode Exit fullscreen mode
  1. First import styled from styled-components package.
  2. Create a constant for creating dots.
  3. Adding some css properties to the Dot

Screenshot 2021-01-15 at 5.36.00 PM

Lets use these dots in DotNavigation component.

export const DotNavigation = () => {
  return (
    <div>
      <Dots />
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

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")};
`;
Enter fullscreen mode Exit fullscreen mode
  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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode
  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.

Screenshot 2021-01-15 at 7.33.07 PM
Screenshot 2021-01-15 at 7.37.18 PM
Screenshot 2021-01-15 at 7.37.25 PM

🎉 It's working !!!

Many thanks for reading this content.
Umesh

Top comments (0)