react-native-ecommerce-components
Version:
A compilation of components to optimize the development of your ecommerce
216 lines (174 loc) • 6.76 kB
Markdown
<p align="center">
<a href="./README.md">🇺🇸 English Documentation</a> |
<a href="./README-pt.md">🇧🇷 Documentação em Português</a>
</p>
---
<h1 align="center">
react-native-ecommerce-components
</h1>
<h5 align="center">
Components to boost the development of your ecommerce.
</h5>
---
<p align="center">
<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">
</p>
<p align="center">
<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>
</p>
<p align="center">
<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>
</p>
---
## :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)**.
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">
<strong>Category List</strong><br/>
<img src="Docs/Images/CategoryList.png" alt="CategoryList" width="300"/>
</a>
</td>
<td align="center">
<a href="Docs/English/Usage/CouponCodeInput.md">
<strong>Coupon Code Input</strong><br/>
<img src="Docs/Images/CouponCodeInput.png" alt="CouponCodeInput" width="300"/>
</a>
</td>
<td align="center">
<a href="Docs/English/Usage/NewClient.md">
<strong>New Client Form</strong><br/>
<img src="Docs/Images/NewClient.png" alt="NewClient" width="300"/>
</a>
</td>
<td align="center">
<a href="Docs/English/Usage/OrderConfirmation.md">
<strong>Order Confirmation</strong><br/>
<img src="Docs/Images/OrderConfirmation.png" alt="OrderConfirmation" width="300"/>
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="Docs/English/Usage/OrderSummary.md">
<strong>Order Summary</strong><br/>
<img src="Docs/Images/OrderSummary.png" alt="OrderSummary" width="300"/>
</a>
</td>
<td align="center">
<a href="Docs/English/Usage/OrderTracking.md">
<strong>Order Tracking</strong><br/>
<img src="Docs/Images/OrderTracking.png" alt="OrderTracking" width="300"/>
</a>
</td>
<td align="center">
<a href="Docs/English/Usage/PaymentGateway.md">
<strong>Payment Gateway</strong><br/>
<img src="Docs/Images/PaymentGateway.png" alt="PaymentGateway" width="300"/>
</a>
</td>
<td align="center">
<a href="Docs/English/Usage/ProductDetail.md">
<strong>Product Detail</strong><br/>
<img src="Docs/Images/ProductDetail.png" alt="ProductDetail" width="300"/>
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="Docs/English/Usage/ProductList.md">
<strong>Product List</strong><br/>
<img src="Docs/Images/ProductList.png" alt="ProductList" width="300"/>
</a>
</td>
<td align="center">
<a href="Docs/English/Usage/ReviewAndRatings.md">
<strong>Review and Ratings</strong><br/>
<img src="Docs/Images/ReviewAndRatings.png" alt="ReviewAndRatings" width="300"/>
</a>
</td>
<td align="center">
<a href="Docs/English/Usage/SearchBar.md">
<strong>Search Bar</strong><br/>
<img src="Docs/Images/SearchBar.png" alt="SearchBar" width="300"/>
</a>
</td>
<td align="center">
<a href="Docs/English/Usage/ShippingDetails.md">
<strong>Shipping Details</strong><br/>
<img src="Docs/Images/ShippingDetails.png" alt="ShippingDetails" width="300"/>
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="Docs/English/Usage/ShoppingCart.md">
<strong>Shopping Cart</strong><br/>
<img src="Docs/Images/ShoppingCart.png" alt="ShoppingCart" width="300"/>
</a>
</td>
<td align="center">
<a href="Docs/English/Usage/WishList.md">
<strong>Wish List</strong><br/>
<img src="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/)