FollowerPointer | Pol-ui - A beautiful and functional UI library for React and Next.js

FollowerPointer is a component that allows you to create a pointer that follows the user's mouse. The pointer is totally customizable and will affect the children components.

import { FollowerPointer } from "pol-ui";

Default FollowerPointer

FollowerPointer

import { FollowerPointer, HelperText, Card } from "pol-ui";
import React from "react";
 
const blogContent = {
  author: "Pol Gubau",
  date: "19th March, 2024",
  title: "Mastering UI Design in React: A Comprehensive Guide",
  description:
    "Explore the intricate world of User Interface (UI) design in React with our insightful blog. From essential principles to advanced techniques, discover how to create stunning, responsive, and user-friendly interfaces that elevate your React applications to the next level. ",
  authorAvatar:
    "https://polgubau.com/_next/image?url=%2Fimages%2Fme.png&w=256&q=75",
};
const TitleComponent = ({
  content,
  avatar,
}: {
  content: string,
  avatar: string,
}) => (
  <div className="flex space-x-2 items-center text-primary-50 bg-primary p-1 rounded-full pr-3">
    <img
      src={avatar}
      height="30"
      width="30"
      alt="thumbnail"
      className="rounded-full"
    />
    <p>{content}</p>
  </div>
);
const CompleteCard = () => {
  return (
    <Card className="max-w-xl">
      <HelperText>{blogContent.date}</HelperText>
      <h2 className="font-bold my-4 -mt-1 text-lg text-zinc-700">
        {blogContent.title}
      </h2>
      <p className="font-normal text-sm text-zinc-500">
        {blogContent.description}
      </p>
    </Card>
  );
};
const FollowerPointerComponent = () => {
  return (
    <FollowerPointer
      content={
        <TitleComponent
          content={blogContent.author}
          avatar={blogContent.authorAvatar}
          children={<CompleteCard />}
        />
      }
    />
  );
};
export default FollowerPointerComponent;

Props

Prop name	Type	Default	Description
className	string	undefined	Custom class name for the component
content	string or React.ReactNode	undefined	Content of the popup
icon	React.ReactNode	undefined	Icon of the component
theme	FollowerPointerTheme	undefined	Theme of the component
children	React.ReactNode	undefined	Children of the component

Examples

FollowerPointer with custom icon

To modify the icon of the FollowerPointer component, you can use the icon prop and pass any React component.

With custom icon

import { FileInput } from "pol-ui";
import React from "react";
 
const FileInputComponent = () => {
  return <FileInput helperText="This file accepts only .pdf files" />;
};
export default FileInputComponent;

Custom content

You can change as well the content prop to pass any string or React component.

Custom content

import { FileInput, Colors, ColorsEnum } from "pol-ui";
import React from "react";
 
const FileInputComponent = () => {
  return(
    <div className="flex flex-wrap items-center gap-3 ">
    {Object.keys(ColorsEnum).map(color => (
      <FileInput color={color as Colors} key={color} />
    ))}
  </div>
  )
};
export default FileInputComponent;

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

interface FollowerPointerTheme {
  base: string;
  icon: string;
  pointerWrapper: string;
  pointer: string;
}