A customizable review form component built with Stencil.js. The component allows users to add a review with a rating, author name, and comment. It emits events for submission and cancellation of the form.
- Star rating selection
- Author and comment input fields with validation
- Emits events on form submission and cancellation
- Customizable styles using CSS variables
To install the component, run:
npm install @mta162/stencil-review-formTo use the component in your project, add the following line to your HTML:
<stencil-review-form formTitle="Your Form Title"></stencil-review-form>Listen to the submitReview and cancelReview events to handle form submissions and cancellations:
<stencil-review-form
onSubmitReview="handleReviewSubmit($event)"
onCancelReview="handleReviewCancel()"
></stencil-review-form>
<script>
function handleReviewSubmit(event) {
console.log('Review submitted:', event.detail);
}
function handleReviewCancel() {
console.log('Review cancelled');
}
</script>You can customize the appearance of the component using the following CSS variables:
-
--primary-color: Primary text color -
--secondary-color: Secondary text color -
--success-color: Success color -
--danger-color: Danger color -
--background-color: Background color -
--submit-button-color: Submit button text color -
--submit-button-background-color: Submit button background color -
--submit-button-border-color: Submit button border color -
--cancel-button-color: Cancel button text color -
--cancel-button-background-color: Cancel button background color -
--cancel-button-border-color: Cancel button border color -
--button-border-radius: Button border radius
review-form {
--primary-color: #FFFFFF;
--secondary-color: #B2B2B2;
--success-color: #1ED760;
--danger-color: #E91429;
--background-color: #121212;
--submit-button-color: #121212;
--submit-button-background-color: #FFFFFF;
--submit-button-border-color: #FFFFFF;
--cancel-button-color: #FFFFFF;
--cancel-button-background-color: #121212;
--cancel-button-border-color: #FFFFFF;
--button-border-radius: 9999px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Review Form Example</title>
<script type="module" src="./node_modules/@your-username/review-form/dist/review-form/review-form.esm.js"></script>
<style>
review-form {
--button-color: #007bff;
--button-cancel-color: #dc3545;
--border-radius: 5px;
--background-color: #f8f9fa;
--font-color: #212529;
--border-color-success: #28a745;
--border-color-danger: #dc3545;
}
</style>
</head>
<body>
<review-form
title="Add a Review"
onSubmitReview="handleReviewSubmit(event)"
onCancelReview="handleReviewCancel()"
></review-form>
<script>
function handleReviewSubmit(event) {
console.log('Review submitted:', event.detail);
}
function handleReviewCancel() {
console.log('Review cancelled');
}
</script>
</body>
</html>