Skip to main content
Version: Next

SalesNotifications Component

The SalesNotifications component is a React component that displays animated notifications of recent purchases. It's designed to create a sense of social proof and urgency by showing random country purchases at regular intervals.

Importing the Component​

To use the SalesNotifications component in your React application, import it as follows:

import { SalesNotifications } from '@/components/SalesNotifications';

Basic Usage​

Here's a basic example of how to use the SalesNotifications component:

import { SalesNotifications } from '@/components/SalesNotifications';

const App = () => {
  return (
    <div>
      {/* Your other components */}
      <SalesNotifications />
    </div>
  );
};

Functionality​

The SalesNotifications component provides the following functionality:

  1. Displays a notification showing a random country where a purchase was made.
  2. Shows how many hours ago the purchase was made (randomly generated).
  3. Animates the notification in and out of view at regular intervals.
  4. Uses a "Verified" badge to add credibility to the notification.

State Management​

The component uses React's useState hook to manage three pieces of state:

const [country, setCountry] = useState(getRandomCountry);
const [hoursAgo, setHoursAgo] = useState(getRandomHoursAgo);
const [isVisible, setVisible] = useState(false);
  • country: Stores the randomly selected country name.
  • hoursAgo: Stores the randomly generated number of hours since the purchase.
  • isVisible: Controls whether the notification is currently visible.

Side Effects​

The component uses the useEffect hook to set up two intervals:

  1. Every 10 seconds, it updates the country and hours ago:
const countryInterval = setInterval(() => {
  setCountry(getRandomCountry());
  setHoursAgo(getRandomHoursAgo());
}, 10000);
  1. Every 5 seconds, it toggles the visibility of the notification:
const visibilityInterval = setInterval(() => {
  setVisible((prev) => !prev);
}, 5000);

The effect also cleans up these intervals when the component unmounts.

Animation​

The component uses Framer Motion for animations. The AnimatePresence component ensures that exit animations are properly handled, while the motion.div applies the following animations:

  • Initial state: Opacity 0 and translated 200px to the left
  • Animate state: Opacity 1 and no translation (fully visible)
  • Exit state: Opacity 0 and translated 200px to the left (same as initial)
<motion.div
  initial={{ opacity: 0, x: -200 }}
  animate={{ opacity: 1, x: 0 }}
  exit={{ opacity: 0, x: -200 }}
  // ... other props
>
  {/* Notification content */}
</motion.div>

Styling​

The component uses Tailwind CSS for styling. Key styling features include:

  • Fixed positioning at the bottom-left corner of the viewport.
  • White background with a border and shadow for visibility.
  • Rounded corners for a modern look.
  • Custom text colors for branding (text-brand-600).
  • Flexible layout using flexbox.

Customization​

To customize the SalesNotifications component:

  1. Modify the countries array to include or exclude specific countries.
  2. Adjust the interval timings in the useEffect hook for more or less frequent updates.
  3. Modify the Tailwind CSS classes to change the appearance of the notification.
  4. Update the text content or structure of the notification message.
  5. Replace the IoShieldCheckmarkSharp icon with a different icon if desired.

Accessibility​

To improve accessibility:

  1. Consider adding an aria-live region to announce new notifications to screen readers.
  2. Ensure sufficient color contrast for text elements, especially the gray text.
  3. Add a visually hidden text description for the checkmark icon.

Best Practices and Improvements​

  1. Consider making the component more configurable by accepting props for intervals, countries, and styling.
  2. Implement a way to disable the notifications or adjust their frequency based on user preferences.
  3. Add error boundaries to handle potential issues with random selections.
  4. Optimize performance by using useMemo for the random selection functions if they become more complex.
  5. Consider adding a way to track actual sales data instead of using random generation for production use.

Example Usage in a Layout​

Here's an example of how you might use the SalesNotifications component in a layout:

import { SalesNotifications } from '@/components/SalesNotifications';

const Layout = ({ children }) => {
  return (
    <div className='min-h-screen'>
      <header>{/* Your header content */}</header>
      <main>{children}</main>
      <footer>{/* Your footer content */}</footer>
      <SalesNotifications />
    </div>
  );
};

export default Layout;

This example demonstrates how to include the SalesNotifications component in a layout, ensuring it appears on all pages that use this layout.

By using the SalesNotifications component, you can add dynamic, animated sales notifications to your React application, potentially increasing user engagement and creating a sense of active product demand. Remember to customize the content and styling to match your specific brand and product offerings.