react-native-ecommerce-components

<a href="./README.md">🇺🇸 English Documentation</a> | <a href="./README-pt.md">🇧🇷 Documentação em Português</a> --- <h1 align="center"> react-native-ecommerce-components </h1> <h5 align="center"> Components to boost the development of your ecommerce. </h5> --- <img alt="GitHub top language" src="https://img.shields.io/github/languages/top/Danilo-Js/react-native-ecommerce-components"> <a href="https://img.shields.io/github/repo-size/Danilo-Js/react-native-ecommerce-components/commits/master"> <img alt="Repository size" src="https://img.shields.io/github/repo-size/Danilo-Js/react-native-ecommerce-components"> </a> <img alt="Repository forks" src="https://img.shields.io/github/forks/Danilo-Js/react-native-ecommerce-components"> <img alt="Repository stars" src="https://img.shields.io/github/stars/Danilo-Js/react-native-ecommerce-components"> <a href="https://img.shields.io/github/issues/Danilo-Js/react-native-ecommerce-components/issues"> <img alt="Repository issues" src="https://img.shields.io/github/issues/Danilo-Js/react-native-ecommerce-components"> </a> <img alt="Last commit" src="https://img.shields.io/github/last-commit/Danilo-Js/react-native-ecommerce-components"> <a href="https://www.npmjs.com/package/react-native-ecommerce-components"> <img alt="npm downloads" src="https://img.shields.io/npm/dm/react-native-ecommerce-components.svg"> </a> <a href="#information_source-about-the-project">About the project</a>   |    <a href="#clipboard-usage">Usage</a>   |    <a href="#memo-license">License</a>   |    <a href="Docs/English/HowToContribuite.md">How to contribute</a>   |    <a href="Docs/English/Diagrams.md">Diagrams</a>    --- ## :information_source: **About the Project** This project was created as part of a final paper for the Computer Science course at **UFES (Federal University of Espírito Santo)**. The [TechEcommerce](https://github.com/Danilo-Js/TechEcommerce) ecommerce was developed, in Portuguese, as proof of the functionalities of this library. Please leave a **_⭐ STAR_** on the [repository](https://github.com/Danilo-Js/react-native-ecommerce-components) and contribute to the library to help improve it further. --- ## 📸 **Components** Click on the image to view the component documentation. <table> <tr> <td align="center"> <a href="Docs/English/Usage/CategoryList.md"> Category List <img src="https://raw.githubusercontent.com/Danilo-Js/react-native-ecommerce-components/main/Docs/Images/CategoryList.png" alt="CategoryList" width="300"/> </a> </td> <td align="center"> <a href="Docs/English/Usage/CouponCodeInput.md"> Coupon Code Input <img src="./Docs/Images/CouponCodeInput.png" alt="CouponCodeInput" width="300"/> </a> </td> <td align="center"> <a href="Docs/English/Usage/NewClient.md"> New Client Form <img src="https://raw.githubusercontent.com/Danilo-Js/react-native-ecommerce-components/main/Docs/Images/NewClient.png" alt="NewClient" width="300"/> </a> </td> <td align="center"> <a href="Docs/English/Usage/OrderConfirmation.md"> Order Confirmation <img src="https://raw.githubusercontent.com/Danilo-Js/react-native-ecommerce-components/main/Docs/Images/OrderConfirmation.png" alt="OrderConfirmation" width="300"/> </a> </td> </tr> <tr> <td align="center"> <a href="Docs/English/Usage/OrderSummary.md"> Order Summary <img src="https://raw.githubusercontent.com/Danilo-Js/react-native-ecommerce-components/main/Docs/Images/OrderSummary.png" alt="Order Summary" width="300" /> </a> </td> <td align="center"> <a href="Docs/English/Usage/OrderTracking.md"> Order Tracking <img src="https://raw.githubusercontent.com/Danilo-Js/react-native-ecommerce-components/main/Docs/Images/OrderTracking.png" alt="OrderTracking" width="300"/> </a> </td> <td align="center"> <a href="Docs/English/Usage/PaymentGateway.md"> Payment Gateway <img src="https://raw.githubusercontent.com/Danilo-Js/react-native-ecommerce-components/main/Docs/Images/PaymentGateway.png" alt="PaymentGateway" width="300"/> </a> </td> <td align="center"> <a href="Docs/English/Usage/ProductDetail.md"> Product Detail <img src="https://raw.githubusercontent.com/Danilo-Js/react-native-ecommerce-components/main/Docs/Images/ProductDetail.png" alt="ProductDetail" width="300"/> </a> </td> </tr> <tr> <td align="center"> <a href="Docs/English/Usage/ProductList.md"> Product List <img src="https://raw.githubusercontent.com/Danilo-Js/react-native-ecommerce-components/main/Docs/Images/ProductList.png" alt="ProductList" width="300"/> </a> </td> <td align="center"> <a href="Docs/English/Usage/ReviewAndRatings.md"> Review and Ratings <img src="https://raw.githubusercontent.com/Danilo-Js/react-native-ecommerce-components/main/Docs/Images/ReviewAndRatings.png" alt="ReviewAndRatings" width="300"/> </a> </td> <td align="center"> <a href="Docs/English/Usage/SearchBar.md"> Search Bar <img src="https://raw.githubusercontent.com/Danilo-Js/react-native-ecommerce-components/main/Docs/Images/SearchBar.png" alt="SearchBar" width="300"/> </a> </td> <td align="center"> <a href="Docs/English/Usage/ShippingDetails.md"> Shipping Details <img src="https://raw.githubusercontent.com/Danilo-Js/react-native-ecommerce-components/main/Docs/Images/ShippingDetails.png" alt="ShippingDetails" width="300"/> </a> </td> </tr> <tr> <td align="center"> <a href="Docs/English/Usage/ShoppingCart.md"> Shopping Cart <img src="https://raw.githubusercontent.com/Danilo-Js/react-native-ecommerce-components/main/Docs/Images/ShoppingCart.png" alt="ShoppingCart" width="300"/> </a> </td> <td align="center"> <a href="Docs/English/Usage/WishList.md"> Wish List <img src="https://raw.githubusercontent.com/Danilo-Js/react-native-ecommerce-components/main/Docs/Images/WishList.png" alt="WishList" width="300"/> </a> </td> </tr> </table> --- ## :clipboard: Usage ### **Installation** To install the library, run one of the following commands: ```sh yarn add react-native-ecommerce-components ``` or ```sh npm install react-native-ecommerce-components ``` ### **Using a Component** 1. **Import the desired component** in your project: ```js import { NewClient } from "react-native-ecommerce-components/lib"; ``` 2. **Render the component:** ```js <NewClient onSubmit={(data) => console.log(data)} fields={["Name", "Email"]} title="Customer Registration" subTitle="Fill out the form below" /> ``` ### **Editing Components in Node Modules** If necessary, you can navigate to the following path: ```plaintext node_modules/react-native-ecommerce-components/lib/components ``` Locate the desired component file and make your edits. --- ## :memo: **License** This project is under the **MIT License**. See the [LICENSE](https://github.com/Danilo-Js/react-native-ecommerce-components/blob/master/LICENSE) file for details. --- **Made with ❤️ by Danilo José Lima de Oliveira** [Get in touch!](https://www.linkedin.com/in/danilo-js/)