react-icons/fa#FaStar JavaScript Examples
The following examples show how to use
react-icons/fa#FaStar.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: FeedbackRating.js From video-journal-for-teams-fe with MIT License | 6 votes |
|
starRating = (props) => {
return (
<div>
{[...Array(5)].map((star) => {
return (
<>
<input type="radio" name="rating"></input>
<FaStar className="star" size={50} />
</>
);
})}
</div>
);
}
Example #2
| Source File: Stars.js From video-journal-for-teams-fe with MIT License | 6 votes |
|
export default function Stars(props) {
const [rating, setRating] = useState(null);
const dispatch = useDispatch();
const user = useSelector((state) => state.User);
const handleStars = (name, value) => {
setRating(value);
dispatch(setFeedback(name, value));
};
return (
<div>
{[...Array(5)].map((_, i) => {
const ratingValue = ++i;
return (
<label>
<input type="radio" name="rating" onClick={() => handleStars(props.values, ratingValue)}></input>
<FaStar className="star" color={ratingValue <= rating ? "yellow" : "grey"} size={30} value={ratingValue} />
</label>
);
})}
</div>
);
}
Example #3
| Source File: Reviews.jsx From Etsy-Reviews with MIT License | 6 votes |
|
getRating(rating) {
if (rating === 1) {
console.log(this.state);
return <FaStar />;
}
if (rating === 2) {
return <div><FaStar/> <FaStar/></div>;
} if (rating === 3) {
return <div><FaStar/> <FaStar/> <FaStar/></div>;
} if (rating === 4) {
return <div><FaStar/> <FaStar/> <FaStar/> <FaStar/></div>;
}
return <div><FaStar/> <FaStar/> <FaStar/> <FaStar/> <FaStar/></div>;
}
Example #4
| Source File: FeedbackForm.js From video-journal-for-teams-fe with MIT License | 5 votes |
|
export function FeedbackForm({ videoId, videoOwnerId, submitFeedback, isSubmitting, all }) {
const [feedback, setFeedback] = useState({
post: "",
});
const uid = useSelector((state) => state.User.userId);
const [rating, setRating] = useState(null);
const handleInput = (e) => {
setFeedback({ ...feedback, [e.target.name]: e.target.value });
};
const handleSubmit = (e) => {
e.preventDefault();
if (feedback.post) {
submitFeedback(videoId, feedback, uid);
axiosWithAuth()
.post(`/email`, {
id: videoOwnerId,
post: feedback.post,
})
.then((hello) => {
console.log("submitted email");
})
.catch((err) => {
console.log("error", err);
});
setFeedback({ post: "" });
}
};
return (
<Form layout="vertical" onSubmit={handleSubmit}>
<Form.Item>
{[...Array(5)].map((_, i) => {
const ratingValue = ++i;
return (
<label>
<input type="radio" name="rating" onClick={() => setRating(ratingValue)}></input>
<FaStar
className="star"
color={ratingValue <= rating ? "yellow" : "grey"}
size={30}
value={ratingValue}
/>
</label>
);
})}
</Form.Item>
<Form.Item label="Feedback">
<TextArea name="post" rows={4} value={feedback.post} onChange={handleInput}></TextArea>
</Form.Item>
<Form.Item>
<Button
loading={isSubmitting}
type="primary"
htmlType="submit"
className="feedback-form-button"
disabled={!feedback.post ? true : false}>
Submit Feedback
</Button>
</Form.Item>
</Form>
);
}
Example #5
| Source File: AddShopToCartButton.jsx From emprezzo with MIT License | 5 votes |
|
AddShopToCartButton = ({ details }) => {
const [globalState, globalActions] = useGlobal();
const [showDialog, setShowDialog] = React.useState(false);
const openDialog = () => {
setShowDialog(true);
}
const closeDialog = () => setShowDialog(false);
React.useEffect(() => {
const allStores = globalState.cfSavedStoresList['stores'];
if (globalState.authenticated && !allStores) {
globalActions.getSavedStores();
}
}, [globalState.cfSavedStoresList['stores'], globalState.authenticated]);
const saveShop = () => {
if (globalActions.findInSavedStores(details)) return;
const shopToSave = {
emprezzoID: details.emprezzoID,
shopName: details.storeName,
photo: details.storeProfileImage,
productURL: details.storeURL,
description: details.description,
}
globalActions.addToSavedStores(shopToSave);
openDialog();
}
return (
<div style={{display: "inline", fontSize: "x-large"}}>
<button onClick={globalState.authenticated ? saveShop : globalActions.openAuthDialog} style={{cursor: "pointer", backgroundColor: "white", color:"#C04CFD", border: "white", outline: "none"}}>
{globalActions.findInSavedStores(details) && <FaStar />}
{!globalActions.findInSavedStores(details) && <FaRegStar />}
</button>
<ShopifyAuthentication />
<Dialog isOpen={showDialog} onDismiss={closeDialog}>
<button className="close-button" onClick={closeDialog} style={{ float: "right", cursor: "pointer" }}>
<span aria-hidden>X</span>
</button>
<div>Store saved Successfully. <br /><a href="/savedstores">Click Here</a> to see the saved store list</div>
<br />
<div>
<button className="button" onClick={() => { closeDialog(); }}>Close</button>
</div>
</Dialog>
</div>
);
}
Example #6
| Source File: tools-list.js From website with MIT License | 5 votes |
|
export default function Tool({ tool }) {
const { githubStats } = tool.fields
return (
<div tw="my-3 flex border-b border-gray-200 pb-6">
<div tw="flex-none w-12">
<Vote sum={tool.children[0].sum} k={tool.children[0].key} />
</div>
<div tw="flex-auto pl-5">
<Link to={tool.fields.slug} tw="pb-4 flex">
<h4 tw="font-bold text-xl mb-3">{tool.name}</h4>
<ul tw="list-none flex ml-2 mt-1">
{tool.types.map(t => (
<li tw="mb-2 mr-1 w-6" key={`${t}-types`}>
<img src={`/icons/${t}.svg`} alt={`Type: ${t}`} />
</li>
))}
</ul>
{githubStats.stargazers_count ? (
<div tw="w-full text-right">
<FaStar tw="mb-1 inline-block" />{" "}
{githubStats.stargazers_count || ""}
</div>
) : (
""
)}
</Link>
<p tw="text-gray-600 mb-3">{tool.description}</p>
<div>
<ul tw="list-none max-w-sm inline-block align-top">
{tool.tags.map(tag => (
<li tw="mb-2 mr-1 inline-block" key={`${tool.fields.slug}${tag}`}>
<a href={"/tag/" + tag}>
<span tw="bg-gray-300 hover:bg-gray-400 px-2 py-1 rounded">
{tag}
</span>
</a>
</li>
))}
</ul>
</div>
</div>
</div>
)
}
Example #7
| Source File: Star.js From Learning-Redux with MIT License | 5 votes |
|
export default function Star({ selected = false }) {
return (
<>
<h1>Great Star</h1>
<FaStar id="star" color={selected ? "red" : "grey"} />
</>
);
}
Example #8
| Source File: Star.js From Learning-Redux with MIT License | 5 votes |
|
export default function Star({ selected = false, onSelect = (f) => f }) {
return <FaStar color={selected ? "red" : "grey"} onClick={onSelect} />;
}
Example #9
| Source File: ReviewsHeader.jsx From Etsy-Reviews with MIT License | 5 votes |
|
ReviewsHeader = (props) => {
const {
reviewsForItem, reviewsForShop, reviewsTab, handleClick, handleSortClick,
handleDropdown, dropdown, handleSortNewest, handleSortRecommended, sortName,
} = props;
if (sortName === 'Newest') {
return (
<ReviewsHeaderContainer reviewsTab={reviewsTab} dropdown={dropdown} className="ReviewsHeaderContainer">
<div>
<h3 className="reviews-total">
{reviewsForShop.length} reviews <span id="reviews-title-stars"><FaStar/> <FaStar/> <FaStar/> <FaStar/> <FaStar/></span>
</h3>
<div className="reviews-tab-items">
<div className="reviews-tab-list" id="reviews-tab-list">
<button type="button" className="reviewsTabItem" tabIndex="0" role="tab" value="reviewsItem" onClick={handleClick}>Reviews for this item <span id="reviews-ratings">{reviewsForItem.length}</span></button>
<button type="button" className="reviewsTabShop" tabIndex="0" role="tab" value="reviewsShop" onClick={handleClick}>Reviews for this shop <span id="reviews-ratings">{reviewsForShop.length}</span></button>
</div>
</div>
</div>
<div className="reviews-sort">
<div className="reviews-sort-items">
<button type="button" className="reviews-sort-title" onClick={handleDropdown}>
Sort by: {sortName} <FaCaretDown />
</button>
<div className="reviews-dropdown-content">
<div className="reviews-sort-dropdown-1" onClick={handleSortRecommended}>Recommended</div>
<br></br>
<div className="reviews-sort-dropdown-2"onClick={handleSortNewest}>Newest <span id="reviews-dropdown-check"><FaCheck/></span></div>
</div>
</div>
</div>
</ReviewsHeaderContainer>
);
}
return (
<ReviewsHeaderContainer reviewsTab={reviewsTab} dropdown={dropdown} className="ReviewsHeaderContainer">
<div>
<h3 className="reviews-total">
{reviewsForShop.length} reviews <span id="reviews-title-stars"><FaStar/> <FaStar/> <FaStar/> <FaStar/> <FaStar/></span>
</h3>
<div className="reviews-tab-items">
<div className="reviews-tab-list" id="reviews-tab-list">
<button type="button" className="reviewsTabItem" tabIndex="0" role="tab" value="reviewsItem" onClick={handleClick}>Reviews for this item <span id="reviews-ratings">{reviewsForItem.length}</span></button>
<button type="button" className="reviewsTabShop" tabIndex="0" role="tab" value="reviewsShop" onClick={handleClick}>Reviews for this shop <span id="reviews-ratings">{reviewsForShop.length}</span></button>
</div>
</div>
</div>
<div className="reviews-sort">
<div className="reviews-sort-items">
<button type="button" className="reviews-sort-title" onClick={handleDropdown}>
Sort by: {sortName} <FaCaretDown />
</button>
<div className="reviews-dropdown-content">
<a className="reviews-sort-dropdown-1" onClick={handleSortRecommended}>Recommended <span id="reviews-dropdown-check"><FaCheck/></span></a>
<br></br>
<a className="reviews-sort-dropdown-2"onClick={handleSortNewest}>Newest</a>
</div>
</div>
</div>
</ReviewsHeaderContainer>
);
}
Example #10
| Source File: Contact.js From ReactJS-Projects with MIT License | 4 votes |
|
Contact = ({ contact, contactKey }) => {
const { dispatch } = useContext(ContactContext)
const history = useHistory();
const deleteContact = () => {
firebase
.database()
.ref(`/contacts/${contactKey}`)
.remove()
.then(() => {
toast("Deleted Successfully.", { type: 'success' })
})
.catch(err => console.log(err))
};
const updateImpContact = () => {
firebase
.database()
.ref(`/contacts/${contactKey}`)
.update(
{
star: !contact.star
},
err => {
console.log(err)
}
)
.then(() => {
toast("Contact Updated", { type: "info" })
})
.catch(err => console.log(err))
};
const updateContact = () => {
dispatch({
type: CONTACT_TO_UPDATE,
payload: contact,
key: contactKey
})
history.push("/contact/add");
};
const viewSingleContact = contact => {
dispatch({
type: SET_SINGLE_CONTACT,
payload: contact
})
history.push("/contact/view");
};
return (
<>
<Row>
<Col
md="1"
className="d-flex justify-content-center align-items-center"
>
<div className="icon" onClick={() => updateImpContact()}>
{contact.star ? (
<FaStar className=" text-primary" />
) : (
<FaRegStar className=" text-info" />
)}
</div>
</Col>
<Col
md="2"
className="d-flex justify-content-center align-items-center"
>
<img src={contact.picture} alt="" className="img-circle profile" />
</Col>
<Col md="8" onClick={() => viewSingleContact(contact)}>
<div className="text-primary">{contact.name}</div>
<div className="text-secondary">{contact.phoneNumber}</div>
<div className="text-secondary">{contact.email} </div>
<div className="text-info">{contact.address}</div>
</Col>
<Col
md="1"
className="d-flex justify-content-center align-items-center"
>
<MdDelete
onClick={() => deleteContact()}
color="danger"
className="text-danger icon"
/>
<MdEdit
className="icon text-info ml-2"
onClick={() => updateContact()}
/>
</Col>
</Row>
</>
);
}
Example #11
| Source File: tool.js From website with MIT License | 4 votes |
|
export default function Tool(d) {
const tool = d.data.toolsYaml
const introText = getIntroText(tool)
const metaDescription = getMetaDescription(tool)
const similarTools = getSimilarTools(tool, d.data.allToolsYaml.nodes, 5)
const freeTools = getFreeTools(tool, d.data.allToolsYaml.nodes, 5)
return (
<Layout>
<Helmet>
<meta charSet="utf-8" />
<meta name="description" content={metaDescription} />
<title>
{tool.name} - {introText}
</title>
</Helmet>
<article tw="shadow w-full">
<div tw="bg-white flex justify-start p-2 md:p-6 w-full">
<div tw="md:w-12 flex-none">
<Vote k={tool.children[0].key} sum={tool.children[0].sum} />
</div>
<div tw="pl-2">
<a tw="hover:underline" href={tool.homepage}>
<h1 tw="text-3xl font-semibold mb-5">{tool.name}</h1>
</a>
<p tw="pb-3">{tool.description}</p>
</div>
</div>
<div tw="px-4 md:pl-20 md:pr-6">
{tool.fields.githubStats.stargazers_count && (
<div tw="flex">
<a tw="hover:underline" href={tool.source}>
Github:
</a>
<ul tw="ml-2 mb-2">
<span tw="mr-3" href={tool.source}>
<FaStar tw="mb-1 mr-2 inline-block" />
{tool.fields.githubStats.stargazers_count}
</span>
<span tw="mr-3" href={tool.source}>
<FaEye tw="mb-1 mr-2 inline-block" />
{tool.fields.githubStats.watchers_count}
</span>
<span tw="mr-3" href={tool.source}>
<FaExclamationCircle tw="mb-1 mr-2 inline-block" />
{tool.fields.githubStats.open_issues_count}
</span>
<span tw="mr-3" href={tool.source}>
<FaCodeBranch tw="mb-1 mr-2 inline-block" />
{tool.fields.githubStats.forks_count}
</span>
<span tw="mr-3" href={tool.source}>
<FaCalendarAlt tw="mb-1 mr-2 inline-block" />
{tool.fields.githubStats.created_at}
</span>
</ul>
</div>
)}
<div tw="flex mb-8">
<span>Workflow integration:</span>
<ul tw="flex">
{tool.types.map(t => (
<li tw="flex" key={t}>
<img
tw="self-start object-contain ml-2 w-6"
src={`/icons/${t}.svg`}
alt={`Type: ${t}`}
/>
<div tw="flex-1">{t}</div>
</li>
))}
</ul>
</div>
<MainMedia tool={tool} />
<p tw="mb-3">
<FaHome tw="mb-1 mr-2 inline-block" />
<a tw="underline" href={tool.homepage}>
Official {tool.name} Homepage
</a>
</p>
{tool.source && (
<p tw="mb-3">
<FaLink tw="mb-1 mr-2 inline-block" />
<a tw="underline" href={tool.source}>
{tool.source}
</a>
</p>
)}
{tool.license ? (
<p tw="mb-3">
<FaCopyright tw="mb-1 mr-2 inline-block" /> {tool.license}{" "}
</p>
) : (
<p tw="mb-3">
<FaOsi tw="mb-1 mr-2 inline-block" />{" "}
{tool.fields.githubStats.license
? tool.fields.githubStats.license.name
: "Open Source"}
</p>
)}
{tool.deprecated ? (
<p tw="mb-3">
<FaExclamationCircle tw="text-red-500 mb-1 mr-2 inline-block" />{" "}
<span tw="text-red-800">Deprecated/Unmaintained </span>
</p>
) : (
<p tw="mb-3">
<FaCheckCircle tw="mb-1 mr-2 inline-block" /> Maintained
</p>
)}
<div>
<FaTags tw="mb-1 mr-2 inline-block align-top" />
<ul tw="list-none max-w-sm inline-block align-top">
{tool.tags.map(tag => (
<li tw="mb-2 mr-1 inline-block" key={tag}>
<a href={"/tag/" + tag}>
<span tw="bg-gray-300 hover:bg-gray-400 px-2 py-1 rounded">
{tag}
</span>
</a>
</li>
))}
</ul>
</div>
{tool.resources && (
<div tw="mb-4">
<h3 tw="mt-3 mb-2 font-bold">More Resources</h3>
<ul tw="list-disc">
{tool.resources.map(resource => (
<li tw="underline ml-4 py-1" key={resource.title}>
<a href={resource.url}>{resource.title}</a>
</li>
))}
</ul>
</div>
)}
{freeTools.length > 0 && (
<div tw="mb-4">
<h3 tw="mt-3 mb-2 text-3xl font-semibold">
Free/OSS Alterantives
</h3>
<ul tw="list-disc">
{freeTools.map(tool => (
<li key={`${tool.slug}-free`} tw="list-none">
<span tw="rounded-full px-4 mr-4 mb-3 bg-yellow-300 text-white p-2 rounded-full leading-none inline-block">
{tool.votes}
</span>
<Link to={tool.slug}>{tool.name}</Link>
</li>
))}
</ul>
</div>
)}
{similarTools.length > 0 && (
<div tw="mb-4">
<h3 tw="mt-3 mb-2 text-xl font-semibold">Alternative Tools</h3>
<ul tw="list-disc">
{similarTools.map(tool => (
<li key={`${tool.slug}-similar`} tw="list-none">
<span tw="rounded-full px-4 mr-4 mb-3 bg-yellow-300 text-white p-2 rounded-full leading-none inline-block">
{tool.votes}
</span>
<Link to={tool.slug}>{tool.name}</Link>
</li>
))}
</ul>
</div>
)}
<div>
<Utterances
repo="analysis-tools-dev/website-comments"
issueTerm="pathname"
label=""
theme="github-light"
crossorigin="anonymous"
async={false}
style={`
& .utterances {
max-width: 950px;
}
`}
/>
</div>
</div>
</article>
</Layout>
)
}
