Review-Intell

review-intell is an NPM package that provides a versatile review component. It can be used as a React component in React-based applications and as a Web Component in non-React environments.

Table of Contents

• Review-Intell
  • Table of Contents
  • Installation
  • Usage
    • Using as a React Component
    • Using as a Web Component
    • Choosing Between React Component and Web Component
  • API Reference
    • React Component Props
    • Web Component Attributes
  • Customization
    • For React Component
    • For Web Component
  • Contributing
  • License

Installation

You can install the review-intell package via npm or yarn:

# Using npm
npm install review-intell

# Using yarn
yarn add review-intell

Usage

Using as a React Component

To use review-intell as a React component, follow these steps:

1. Import the Component:

   Import the ReviewBox component from the review-intell package into your React component.

   import { ReviewBox } from 'review-intell';
   
   function ProductPage() {
     return (
       <div>
         <h1>Product Reviews</h1>
         <ReviewBox />
       </div>
     );
   }
   
   export default ProductPage;

2. Use the Component:

   Simply include <ReviewBox /> in your JSX as shown above. The component will render within your React application.

Using as a Web Component

To use review-intell as a Web Component in non-React environments, follow these steps:

1. Import the Web Component:

   Import the Web Component into your project by adding the following script in your HTML file or JavaScript entry point:

   import 'review-intell/webcomponent';

   Or, directly include it in your HTML:

   <script src="node_modules/review-intell/dist/review-intell-webcomponent.js"></script>

2. Use the Web Component:

   You can now use the review-box custom element in your HTML:

   <h1>Product Reviews</h1>
   <review-box></review-box>

Choosing Between React Component and Web Component

You can choose whether to use the React component or the Web Component based on your application's requirements:

• React: If you're working in a React environment, use the React component for better integration.
• Web Component: If you're not using React or want a lightweight integration, use the Web Component.

API Reference

React Component Props

• title (string): The title of the review section.
• reviews (array): An array of review objects to display.

Web Component Attributes

• title (string): The title of the review section.
• reviews (JSON string): A JSON string representing the array of review objects to display.

Customization

You can customize the look and feel of the component by applying custom styles or overriding the default styles provided by the package.

For React Component

Use styled-components or your preferred CSS-in-JS solution to style the ReviewBox component.

For Web Component

Use standard CSS to style the review-box custom element.

review-box {
  --primary-color: #ff5722;
  --secondary-color: #4caf50;
}

Contributing

If you find any issues or have suggestions, feel free to open an issue or submit a pull request. Contributions are welcome!

License

This project is licensed under the MIT License. See the LICENSE file for more details.