Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/AlwaysLoveme/capacitor-plugin-safe-area
capacitor plugin to get safeArea info on Android and IOS, support Capacitor6
https://github.com/AlwaysLoveme/capacitor-plugin-safe-area
capacitor capacitor-plugin typescript
Last synced: 24 days ago
JSON representation
capacitor plugin to get safeArea info on Android and IOS, support Capacitor6
- Host: GitHub
- URL: https://github.com/AlwaysLoveme/capacitor-plugin-safe-area
- Owner: AlwaysLoveme
- License: mit
- Created: 2021-08-12T05:47:14.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-07-13T14:13:52.000Z (5 months ago)
- Last Synced: 2024-11-12T03:35:34.280Z (about 1 month ago)
- Topics: capacitor, capacitor-plugin, typescript
- Language: Java
- Homepage:
- Size: 20.2 MB
- Stars: 67
- Watchers: 4
- Forks: 14
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-capacitorjs - capacitor-plugin-safe-area - Get SafeArea info on Android and IOS. (Plugins / Community Plugins)
- awesome-capacitor - Safe Area - Get SafeArea info on Android and IOS. (Other plugins)
README
# capacitor-plugin-safe-area
#### a capacitor plugin to get SafeArea info on Android and IOS, latest version is support for Capacitor v6.
### Version Support
- [x] v3.0.0 support Capacitor v6
- [x] v2.0.0 support Capacitor v5
- [x] v1.0.0 support Capacitor v4
- [x] v0.0.1 support Capacitor v3
> I'm very glad if the plugin helped you, please give it a star
## Install
```bash
npm install capacitor-plugin-safe-area@latest
npx cap sync
```
## Useage
```typescript
import { SafeArea } from 'capacitor-plugin-safe-area';
SafeArea.getSafeAreaInsets().then(({ insets }) => {
console.log(insets);
});
SafeArea.getStatusBarHeight().then(({ statusBarHeight }) => {
console.log(statusBarHeight, 'statusbarHeight');
});
await SafeArea.removeAllListeners();
// when safe-area changed
await SafeArea.addListener('safeAreaChanged', data => {
const { insets } = data;
for (const [key, value] of Object.entries(insets)) {
document.documentElement.style.setProperty(
`--safe-area-inset-${key}`,
`${value}px`,
);
}
});
```
## Use with TailwindCSS
Use `TailwindCSS` with the `plugin`: [https://github.com/mahyarmirrashed/tailwindcss-safe-area-capacitor](https://github.com/mahyarmirrashed/tailwindcss-safe-area-capacitor)
For more usage, please refer to the plugin repo
```tsx
import {useEffect} from 'react';
import { SafeArea } from 'capacitor-plugin-safe-area';
import type {FC} from 'react';
const App = () => {
useEffect(() => {
(async function(){
const safeAreaData = await SafeArea.getSafeAreaInsets();
const {insets} = safeAreaData;
for (const [key, value] of Object.entries(insets)) {
document.documentElement.style.setProperty(
`--safe-area-inset-${key}`,
`${value}px`,
);
}
})()
}, []);
return (
....
)
}
export default App;
```
## API
* [`getSafeAreaInsets()`](#getsafeareainsets)
* [`getStatusBarHeight()`](#getstatusbarheight)
* [`setImmersiveNavigationBar()`](#setimmersivenavigationbar)
* [`addListener('safeAreaChanged', ...)`](#addlistenersafeareachanged-)
* [`removeAllListeners()`](#removealllisteners)
* [Interfaces](#interfaces)
### getSafeAreaInsets()
```typescript
getSafeAreaInsets() => Promise
```
Get mobile SafeArea info
**Returns:** Promise<SafeAreaInsets>
--------------------
### getStatusBarHeight()
```typescript
getStatusBarHeight() => Promise
```
Get mobile statusbar height
**Returns:** Promise<StatusBarInfo>
--------------------
### setImmersiveNavigationBar()
```typescript
setImmersiveNavigationBar() => Promise
```
Set navigation bar immersive on Android , not implemented on IOS
--------------------
### addListener('safeAreaChanged', ...)
```typescript
addListener(event: 'safeAreaChanged', listenerFunc: (data: SafeAreaInsets) => void) => Promise
```
Event listener when safe-area changed
| Param | Type |
| ------------------ | ---------------------------------------------------------------------------- |
| **`event`** | 'safeAreaChanged' |
| **`listenerFunc`** | (data: SafeAreaInsets) => void |
**Returns:** Promise<PluginListenerHandle>
--------------------
### removeAllListeners()
```typescript
removeAllListeners() => Promise
```
Remove all native listeners for this plugin
--------------------
### Interfaces
#### SafeAreaInsets
| Prop | Type |
| ------------ | --------------------------------------------- |
| **`insets`** | SafeArea |
#### SafeArea
| Prop | Type |
| ------------ | ------------------- |
| **`top`** | number |
| **`right`** | number |
| **`bottom`** | number |
| **`left`** | number |
#### StatusBarInfo
| Prop | Type |
| --------------------- | ------------------- |
| **`statusBarHeight`** | number |
#### PluginListenerHandle
| Prop | Type |
| ------------ | ----------------------------------------- |
| **`remove`** | () => Promise<void> |