Make Voting Fun With Code

🚀 Say Hello to react-votecom!

Need an easy way to add voting features to your React app? Look no further! react-votecom is here to make your life simpler. Whether you're building a voting system or anything with upvotes and downvotes, this package has you covered.

📦 Getting Started in Seconds!

First, install the package:

npm install react-votecom

Done? Awesome. You’re ready to roll!

🤔 What is react-votecom?

Think of react-votecom as your personal voting assistant. It’s a package with smart, reusable functions that take care of all the messy logic for managing votes.

Here’s what you can do:

🟢 Upvotes and 🔴 Downvotes.
🎯 Calculate percentages of votes.
🧮 Keep track of total counts effortlessly.

🚀 Demo Time!

Want to see it in action? Check out the demo.

🛠️ How Does It Work?

🌟 Two Main Functions

separateVotingFunction: Tracks upvotes and downvotes separately.
combinedVotingFunction: Combines votes into a total count and calculates percentages.

For more exciting features and detailed documentation, visit our GitHub repo or npm site

🖥️ How to Use react-votecom

🛠️ Option 1: Combined Voting

One function, all the votes, plus dynamic percentages.

import { useEffect, useState } from 'react';  
import { combinedVotingFunction } from 'react-votecom';  

function App() {  
  const [stats, setStats] = useState({  
    upvotes: 0,  
    downvotes: 0,  
    count: 0,  
    upvotePercentage: 0,  
    downvotePercentage: 0,  
  });  

  useEffect(() => {  
    const savedStats = localStorage.getItem('votingStats');  
    if (savedStats) setStats(JSON.parse(savedStats));  
  }, []);  

  useEffect(() => {  
    localStorage.setItem('votingStats', JSON.stringify(stats));  
  }, [stats]);  

  const handleVote = (type) => {  
    const updatedStats = combinedVotingFunction(stats, type);  
    setStats(updatedStats);  
  };  

  return (  
    <div>  
      <h1>React Voting Made Easy</h1>  
      <button onClick={() => handleVote('upvote')}>👍 Upvote</button>  
      <button onClick={() => handleVote('downvote')}>👎 Downvote</button>  
      <p>Total Votes: {stats.count}</p>  
      <p>Upvotes: {stats.upvotePercentage}%</p>  
      <p>Downvotes: {stats.downvotePercentage}%</p>  
    </div>  
  );  
}  
export default App;

🛠️ Option 2: Separate Voting

Handle upvotes and downvotes individually.

import { useEffect, useState } from 'react';  
import { separateVotingFunction } from 'react-votecom';  

function App() {  
  const [stats, setStats] = useState({ upvotes: 0, downvotes: 0 });  

  useEffect(() => {  
    const savedStats = localStorage.getItem('votingStats');  
    if (savedStats) setStats(JSON.parse(savedStats));  
  }, []);  

  useEffect(() => {  
    localStorage.setItem('votingStats', JSON.stringify(stats));  
  }, [stats]);  

  const handleUpvote = () => setStats(separateVotingFunction(stats, 'upvote'));  
  const handleDownvote = () => setStats(separateVotingFunction(stats, 'downvote'));  

  return (  
    <div>  
      <h1>React Voting Made Easy</h1>  
      <button onClick={handleUpvote}>👍 Upvote</button>  
      <button onClick={handleDownvote}>👎 Downvote</button>  
      <p>Upvotes: {stats.upvotes}</p>  
      <p>Downvotes: {stats.downvotes}</p>  
    </div>  
  );  
}  
export default App;

🎉 What Are You Waiting For?

Add react-votecom to your project today and say goodbye to the hassle of managing votes manually.

✨ Happy coding! ✨

Blog