رای دادن را با کد سرگرم کننده کنید

Summarize this content to 400 words in Persian Lang

🚀 به react-votecom سلام کنید!

به یک راه آسان برای افزودن ویژگی های رای دادن به برنامه React خود نیاز دارید؟ دیگر نگاه نکنید! react-votecom اینجاست تا زندگی شما را ساده تر کند. چه در حال ساختن یک سیستم رای گیری یا هر چیزی با رای موافق و مخالف باشید، این بسته شما را پوشش می دهد.

📦 شروع در چند ثانیه!

ابتدا بسته را نصب کنید:

npm install react-votecom

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

انجام شد؟ عالیه شما آماده رول هستید!

🤔 react-votecom چیست؟

فکر کن react-votecom به عنوان دستیار رای گیری شخصی شما این بسته ای با عملکردهای هوشمند و قابل استفاده مجدد است که از همه منطق آشفته مدیریت آرا مراقبت می کند.

در اینجا کاری است که می توانید انجام دهید:

🢔 رای موافق و 🔴 رای مخالف.

🎯 محاسبه درصد آرا.

🧮 تعداد کل را بدون زحمت پیگیری کنید.

🚀 زمان نمایش!

آیا می خواهید آن را در عمل ببینید؟ نسخه ی نمایشی را بررسی کنید.

🛠️ چگونه کار می کند؟

🌟 دو تابع اصلی

separateVotingFunction: رأی موافق و مخالف را به طور جداگانه دنبال می کند.

combinedVotingFunction: آرا را در تعداد کل ترکیب می کند و درصدها را محاسبه می کند.

برای ویژگی های هیجان انگیز بیشتر و مستندات دقیق، از سایت مخزن یا npm GitHub ما دیدن کنید

🖥️ نحوه استفاده از react-votecom

🛠️ گزینه 1: رای گیری ترکیبی

یک تابع، همه آرا، به علاوه درصد پویا.

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 Easyh1>
<button onClick={() => handleVote(‘upvote’)}>👍 Upvotebutton>
<button onClick={() => handleVote(‘downvote’)}>👎 Downvotebutton>
<p>Total Votes: {stats.count}p>
<p>Upvotes: {stats.upvotePercentage}%p>
<p>Downvotes: {stats.downvotePercentage}%p>
div>
);
}
export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

🛠️ گزینه 2: رای گیری جداگانه

رأی موافق و مخالف را به صورت جداگانه مدیریت کنید.

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 Easyh1>
<button onClick={handleUpvote}>👍 Upvotebutton>
<button onClick={handleDownvote}>👎 Downvotebutton>
<p>Upvotes: {stats.upvotes}p>
<p>Downvotes: {stats.downvotes}p>
div>
);
}
export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

🎉 منتظر چه هستید؟

اضافه کنید react-votecom امروز به پروژه خود بروید و با دردسر مدیریت دستی آرا خداحافظی کنید.

✨ کد نویسی مبارک! ✨

npm install react-votecom  

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 Easyh1>  
      <button onClick={() => handleVote('upvote')}>👍 Upvotebutton>  
      <button onClick={() => handleVote('downvote')}>👎 Downvotebutton>  
      <p>Total Votes: {stats.count}p>  
      <p>Upvotes: {stats.upvotePercentage}%p>  
      <p>Downvotes: {stats.downvotePercentage}%p>  
    div>  
  );  
}  
export default App;  

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 Easyh1>  
      <button onClick={handleUpvote}>👍 Upvotebutton>  
      <button onClick={handleDownvote}>👎 Downvotebutton>  
      <p>Upvotes: {stats.upvotes}p>  
      <p>Downvotes: {stats.downvotes}p>  
    div>  
  );  
}  
export default App;