fe-pilot

Version:

scanner in web, phonebook in web, autofill otp in web, share web, TextToSpeech in web, Voice Recognition in web, live location tracking in web, detect my location web, wakelock in web, color picker, WhatsappShare, SnapScanner, NetworkMonitor, View360

github.com/opensrc0/fe-pilot

opensrc0/fe-pilot

245 lines (224 loc) • 11.2 kB

Markdown

<img src="https://github.com/opensrc0/fe-pilot/blob/develop/logo.png" alt="fe-pilot Logo" align="center" width="30%" style="width: 30%;"> <h2 align="center">A React UI library for Advanced Web Features 👨‍✈️ </h2> <h3 > <a href="https://www.npmjs.com/package/fe-pilot"> <img alt="Minified Size" src="https://img.shields.io/bundlephobia/min/fe-pilot"/> </a> <a href="https://react.dev/reference/react"> <img alt="React Version" src="https://img.shields.io/badge/react-18.2.0-%23f1e05a?logo=React"/> </a> <a href="https://www.npmjs.com/package/fe-pilot"> <img alt="NPM Downloads" src="https://img.shields.io/npm/dw/fe-pilot?label=Downloads&logo=npm"/> </a> <a href="https://www.npmjs.com/package/fe-pilot/v/latest"> <img alt="Latest Release" src="https://badgen.net/github/release/opensrc0/fe-pilot?icon=github&color=pink"/> </a> <a href="https://github.com/opensrc0/fe-pilot/stargazers"> <img alt="Github Stars" src="https://badgen.net/github/stars/opensrc0/fe-pilot?icon=github&color=purple"/> </a> <a href="https://github.com/opensrc0/fe-pilot?tab=MIT-1-ov-file"> <img alt="MIT License" src="https://badgen.net/static/license/MIT/orange"/> </a> </h3> A React UI library for Advanced Web Features that streamlines the development of modern web applications and websites. The library offers component like scanner, voice search, autofill otp, phonebook, share and many more for a small/medium/large size web based applications. Fe-Pilot is a easy to use, light weighted, fully mobile APP like features in web. ## Table of contents 1. 🚀 [Features](#features) 2. 📦 [Installation](#installation) 3. 💻 [Usage](#usage) 4. 📚 [Online Editor Templates](#online-editor-templates) 5. 📽️ [Demo](#demo-the-features-and-component) 6. 📝 [Contributing](#contributing) 7. ✨ [Contributors](#contributors) 8. ⚖️ [License](#license) ## Features - **Web/Mobile Support:** fe-pilot will be helpfull in Large/Mid/Small size of web based applications. - **Ease of Use:** fe-pilot contains a set of components like `Scanner`, `PhoneBook`, `Voice Search`, `Share`, `Live Location Tracking`, `Current Location` that are easy to plug and play. - **Scalable & Maintainable:** fe-pilot components are built on top of a React for better scalable, maintainable component. ## Installation Install `fe-pilot` package using any package manager ###### 1. Package Manager yarn ```sh yarn add fe-pilot ``` ###### 2. Package Manager npm ```sh npm i fe-pilot --save ``` ###### 3. Package Manager pnpm ```sh pnpm add fe-pilot ``` ###### 4. Package Manager bun ```sh bun add fe-pilot ``` ## Usage #### 1. Use fe-pilot in your application ```js import Share from 'fe-pilot/Share'; <Share title={'fe-pilot'} description={'A React library for advanced web features'} url={'https://www.npmjs.com/package/fe-pilot'} /> ``` <details> <summary>See the list of components</summary> ### 1. :white_check_mark:   [AutoFillOtp](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/AutoFillOtp/README.md) 2. :white_check_mark:   [ColorPicker](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/ColorPicker/README.md) 3. :white_check_mark:   [CopyToClipboard](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/CopyToClipboard/README.md) 4. :white_check_mark:   [FaceDetector](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/FaceDetector/README.md) 5. :white_check_mark:   [LiveLocation](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/LiveLocationTracking/README.md) 6. :white_check_mark:   [LocateMe](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/LocateMe/README.md) 7. :white_check_mark:   [NetworkMonitor](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/NetworkMonitor/README.md) 8. :white_check_mark:   [PhoneBook](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/PhoneBook/README.md) 9. :white_check_mark:   [Scanner](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/Scanner/README.md) 10. :white_check_mark:   [Share](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/Share/README.md) 11. :white_check_mark:   [SnapScanner](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/SnapScanner/README.md) 12. :white_check_mark:   [TextToSpeech](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/TextToSpeech/README.md) 13. :white_check_mark:   [Vibrate](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/Vibrate/README.md) 14. :white_check_mark:   [View360](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/View360/README.md) 15. :white_check_mark:   [VoiceRecognition](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/VoiceRecognition/README.md) 16. :white_check_mark:   [WakeLock](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/WakeLock/README.md) 17. :white_check_mark:   [WhatsappShare](https://github.com/opensrc0/fe-pilot/blob/main/__app/component/WhatsappShare/README.md) </details> ## Online Editor Templates #### 1. CodeSandbox - JavaScript Starter: https://codesandbox.io/p/sandbox/fe-pilot-js-6jpxdq   ## Demo the features and component 1. https://6jpxdq.csb.app/ ## Contributing Feel like contributing? Most welcome! [Setup locally](https://github.com/opensrc0/fe-pilot/blob/HEAD/.github/SETUP.md) to get fe-pilot working on your local machine and [guide lines](https://github.com/opensrc0/fe-pilot/blob/main/.github/CONTRIBUTING.md) to contribute in fe-pilot. ## Contributors Thanks goes to these wonderful people <table> <tbody> <tr> <td align="center" valign="top" width="14.28%"> <a href="https://github.com/opensrc0"> <img src="https://avatars.githubusercontent.com/u/6891544?s=400&v=4" width="64px;" alt="Himanshu Gupta" /> </a> <a href="https://github.com/opensrc0">Himanshu Gupta</a> </td> <td align="center" valign="top" width="14.28%"> <a target="_blank" href="https://github.com/hardikjain29"> <img src="https://avatars.githubusercontent.com/u/13768932?v=4" width="64px;" alt="Hardik Jain" /> </a> <a target="_blank" href="https://github.com/hardikjain29">Hardik Jain</a> </td> <td align="center" valign="top" width="14.28%"> <a href="https://github.com/ashwinihegde123"> <img src="https://avatars.githubusercontent.com/u/40521396?v=4" width="64px;" alt="Ashwini Hegde" /> </a> <a href="https://github.com/ashwinihegde123">Ashwini Hegde</a> </td> <td align="center" valign="top" width="14.28%"> <a target="_blank" href="https://github.com/Indian2025"> <img src="https://avatars.githubusercontent.com/u/164238626?v=4" width="64px;" alt="Shashank Gupta" /> </a> <a target="_blank" href="https://github.com/Indian2025">Shashank Gupta</a> </td> <td align="center" valign="top" width="14.28%"> <a href="https://github.com/Alok30"> <img src="https://avatars.githubusercontent.com/u/36290248?s=64&v=4" width="64px;" alt="Alok Dubey" /> </a> <a href="https://github.com/Alok30">Alok Dubey</a> </td> <td align="center" valign="top" width="14.28%"> <a href="https://github.com/NimishGupta95"> <img src="https://avatars.githubusercontent.com/u/13002628?v=4" width="64px;" alt="Nimish Gupta" /> </a> <a href="https://github.com/NimishGupta95">Nimish Gupta</a> </td> <td align="center" valign="top" width="14.28%"> <a href="https://github.com/Ravi-Chef"> <img src="https://avatars.githubusercontent.com/u/31059087?v=4" width="64px;" alt="Ravi Verma" /> </a> <a href="https://github.com/Ravi-Chef">Ravi Verma</a> </td> </tr> <tr>  <td align="center" valign="top" width="14.28%"> <a target="_blank" href="https://github.com/semantic-release-bot"> <img src="https://avatars.githubusercontent.com/u/32174276?v=4" width="64px;" alt="Semantic Release Bot" /> </a> <a target="_blank" href="https://github.com/semantic-release-bot">Semantic Release Bot</a> </td> <td align="center" valign="top" width="14.28%"> <a target="_blank" href="https://github.com/vineet091"> <img src="https://avatars.githubusercontent.com/u/5345138?v=4" width="64px;" alt="Vineet Gupta" /> </a> <a target="_blank" href="https://github.com/vineet091">Vineet Gupta</a> </td> <td align="center" valign="top" width="14.28%"> <a target="_blank" href="https://github.com/fossabot"> <img src="https://avatars.githubusercontent.com/u/29791463?v=4" width="64px;" alt="Fossa Bot" /> </a> <a target="_blank" href="https://github.com/fossabot">Fossa Bot</a> </td>  <td align="center" valign="top" width="14.28%"> <a target="_blank" href="https://github.com/swarajgolu"> <img src="https://avatars.githubusercontent.com/u/31703347?v=4" width="64px;" alt="Swaraj Singh" /> </a> <a target="_blank" href="https://github.com/swarajgolu">Swaraj Singh</a> </td> <td align="center" valign="top" width="14.28%"> <a target="_blank" href="https://github.com/100beats"> <img src="https://avatars.githubusercontent.com/u/172108056?v=4" width="64px;" alt="100beats" /> </a> <a target="_blank" href="https://github.com/100beats">100beats</a> </td> </tr> </tbody> </table> ## License MIT © [Himanshu Gupta](https://github.com/opensrc0)