@aspect/capacitor-lynx

Use Lynx native rendering engine instead of WebView in your Capacitor apps.

Installation

npm install @aspect/capacitor-lynx

Features

• React Compatibility: Use familiar React hooks with Lynx
• Component Adapters: Easy migration from HTML to Lynx native components
• Plugin Compatibility: Capacitor-compatible plugin APIs

Usage

React Hooks

// Before (Capacitor/React)
import { useState, useEffect } from 'react'

// After (Lynx)
import { useState, useEffect } from '@aspect/capacitor-lynx/react'

Components

import { View, Text, Button, Image } from '@aspect/capacitor-lynx/components'

function MyComponent() {
  return (
    <View style={{ padding: 20 }}>
      <Text>Hello Lynx!</Text>
      <Button onClick={() => console.log('clicked')}>
        Click me
      </Button>
    </View>
  )
}

Plugins

import { Device, Storage, App } from '@aspect/capacitor-lynx/plugins'

// Get device info
const info = await Device.getInfo()

// Storage
await Storage.set({ key: 'name', value: 'John' })
const { value } = await Storage.get({ key: 'name' })

Migration Guide

| HTML/React | Lynx | |------------|------| | <div> | <View> | | <span>, <p> | <Text> | | <button> | <Button> | | <img> | <Image> | | <input> | <TextInput> | | onClick | onPress or onClick |

API Reference

Components

• View - Container component (replaces <div>)
• Text - Text display (replaces <span>, <p>, <h1>-<h6>)
• Button - Clickable button
• Image - Image display
• ScrollView - Scrollable container
• TextInput - Text input field
• TouchableOpacity - Touchable with opacity feedback

Plugins

• Device - Device information
• Storage - Key-value storage
• App - App lifecycle
• Haptics - Haptic feedback
• Clipboard - Clipboard access

License

MIT