@ruby-native/react 0.6.0 → 0.8.0

package/README.md

@@ -0,0 +1,50 @@
+# @ruby-native/react
+
+React components for [Ruby Native](https://rubynative.com). Use these in an Inertia.js + React app to emit the signal elements that Ruby Native's iOS and Android apps read to render native tabs, navigation bars, forms, and more.
+
+## Install
+
+```sh
+npm install @ruby-native/react
+```
+
+## Usage
+
+```jsx
+import { NativeTabs, NativeNavbar, NativeButton, NativeForm } from "@ruby-native/react"
+
+export default function Show({ product }) {
+  return (
+    <>
+      <NativeNavbar title={product.name}>
+        <NativeButton icon="bag" href="/cart" />
+      </NativeNavbar>
+
+      <NativeForm />
+
+      {/* your page content */}
+    </>
+  )
+}
+```
+
+Each component renders a hidden `data-native-*` signal element that the Ruby Native runtime picks up and turns into the corresponding native UI.
+
+## Components
+
+- `NativeTabs` - show the native tab bar
+- `NativePush` - request push notification permission
+- `NativeForm` - mark the current page as a form so back navigation skips it
+- `NativeNavbar` - native navigation bar with title and buttons
+- `NativeButton` - native nav bar button (icon, title, href, or click target)
+- `NativeMenuItem` - item inside a native menu
+- `NativeSubmitButton` - native "Save" button that submits a form
+- `NativeOverscroll` - per-page overscroll colors
+
+## Docs
+
+Full guides at [rubynative.com/docs](https://rubynative.com/docs).
+
+## License
+
+MIT

package/index.js

@@ -15,7 +15,7 @@ export function NativeForm() {
   return createElement("div", { "data-native-form": true, hidden: true })
 }
 
-export function NativeNavbar({ title, children }) {
+export function NativeNavbar({ title = "", children }) {
   return createElement("div", { "data-native-navbar": title, hidden: true }, children)
 }
 
@@ -40,6 +40,13 @@ export function NativeMenuItem({ title, href, click, icon, selected }) {
   return createElement("div", props)
 }
 
+export function NativeFab({ icon, href, click }) {
+  const props = { "data-native-fab": true, "data-native-icon": icon, hidden: true }
+  if (href) props["data-native-href"] = href
+  if (click) props["data-native-click"] = click
+  return createElement("div", props)
+}
+
 export function NativeOverscroll({ top, bottom }) {
   return createElement("div", {
     "data-native-overscroll-top": top,

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@ruby-native/react",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "React components for Ruby Native",
   "main": "index.js",
-  "files": ["index.js"],
+  "files": ["index.js", "README.md"],
   "peerDependencies": {
     "react": ">=18",
     "@inertiajs/react": ">=2"