https://github.com/codesyntax/ionic-react-capacitor-demo
https://github.com/codesyntax/ionic-react-capacitor-demo
capacitor ionic ionic6 leaflet react
Last synced: 10 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/codesyntax/ionic-react-capacitor-demo
- Owner: codesyntax
- Created: 2022-01-25T08:04:14.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-01-31T11:37:31.000Z (about 4 years ago)
- Last Synced: 2025-03-25T19:41:12.825Z (11 months ago)
- Topics: capacitor, ionic, ionic6, leaflet, react
- Language: TypeScript
- Homepage: https://ionic-react-capacitor-demo.netlify.app
- Size: 2.21 MB
- Stars: 8
- Watchers: 4
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Ionic React Capacitor Demo
## A series of front-end and native integration tests with Ionic React.
**Online demo:** https://ionic-react-capacitor-demo.netlify.app/
**APK:** [Download](https://github.com/codesyntax/ionic-react-capacitor-demo/releases/download/2.0/ionic-react-capacitor-demo.apk)
The demos are divided into three tabs.
1. Leaflet map.
2. [UI components](https://ionicframework.com/docs/components).
3. [Native access with Capacitor](https://capacitorjs.com/).
## Leaflet map
* Map integration with [Leaflet](https://leafletjs.com/) and [react-leaflet](https://react-leaflet.js.org/).
* Layer selector with the new [Ionic 6 Sheet Modal](https://ionicframework.com/docs/api/modal#sheet-modal).
* Config to add new layers dynamically.
## Components
* [Natigation with React](https://ionicframework.com/docs/react/navigation)
* fetch request and render the HTML result with [innerHTML](https://reactjs.org/ocs/dom-elements.html#dangerouslysetinnerhtml)
* [Datetime](https://ionicframework.com/docs/api/datetime) in modal
* [Reorder](https://ionicframework.com/docs/api/reorder) list
* [Toggle](https://ionicframework.com/docs/api/toggle) button
* [Accordion](https://ionicframework.com/docs/api/accordion)
* [New material design form](https://ionicframework.com/docs/api/item#fill) (Input and Select)
* [Breadcrumb](https://ionicframework.com/docs/api/breadcrumb)
* [FabButton](https://ionicframework.com/docs/api/fab)
* [Dark Mode](https://ionicframework.com/docs/theming/dark-mode)
## Capacitor
* [Open url in browser](https://capacitorjs.com/docs/apis/browser)
* [Camera](https://capacitorjs.com/docs/apis/camera)
* [Barcode scanner](https://github.com/capacitor-community/barcode-scanner) and scan UI customization with React Portals
* [Copy to clipboard](https://capacitorjs.com/docs/apis/clipboard)
* [Share](https://capacitorjs.com/docs/apis/share)
* [Geolocation](https://capacitorjs.com/docs/apis/geolocation)
* [Device info](https://capacitorjs.com/docs/apis/device)
* [Battery status](https://capacitorjs.com/docs/apis/device#api)
* [Device id](https://capacitorjs.com/docs/apis/device#api)
* [Language code](https://capacitorjs.com/docs/apis/device#api)