@ruby-native/react 0.6.0 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +50 -0
- package/index.js +1 -1
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
# @ruby-native/react
|
|
2
|
+
|
|
3
|
+
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.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
npm install @ruby-native/react
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```jsx
|
|
14
|
+
import { NativeTabs, NativeNavbar, NativeButton, NativeForm } from "@ruby-native/react"
|
|
15
|
+
|
|
16
|
+
export default function Show({ product }) {
|
|
17
|
+
return (
|
|
18
|
+
<>
|
|
19
|
+
<NativeNavbar title={product.name}>
|
|
20
|
+
<NativeButton icon="bag" href="/cart" />
|
|
21
|
+
</NativeNavbar>
|
|
22
|
+
|
|
23
|
+
<NativeForm />
|
|
24
|
+
|
|
25
|
+
{/* your page content */}
|
|
26
|
+
</>
|
|
27
|
+
)
|
|
28
|
+
}
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
Each component renders a hidden `data-native-*` signal element that the Ruby Native runtime picks up and turns into the corresponding native UI.
|
|
32
|
+
|
|
33
|
+
## Components
|
|
34
|
+
|
|
35
|
+
- `NativeTabs` - show the native tab bar
|
|
36
|
+
- `NativePush` - request push notification permission
|
|
37
|
+
- `NativeForm` - mark the current page as a form so back navigation skips it
|
|
38
|
+
- `NativeNavbar` - native navigation bar with title and buttons
|
|
39
|
+
- `NativeButton` - native nav bar button (icon, title, href, or click target)
|
|
40
|
+
- `NativeMenuItem` - item inside a native menu
|
|
41
|
+
- `NativeSubmitButton` - native "Save" button that submits a form
|
|
42
|
+
- `NativeOverscroll` - per-page overscroll colors
|
|
43
|
+
|
|
44
|
+
## Docs
|
|
45
|
+
|
|
46
|
+
Full guides at [rubynative.com/docs](https://rubynative.com/docs).
|
|
47
|
+
|
|
48
|
+
## License
|
|
49
|
+
|
|
50
|
+
MIT
|
package/index.js
CHANGED
|
@@ -15,7 +15,7 @@ export function NativeForm() {
|
|
|
15
15
|
return createElement("div", { "data-native-form": true, hidden: true })
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
export function NativeNavbar({ title, children }) {
|
|
18
|
+
export function NativeNavbar({ title = "", children }) {
|
|
19
19
|
return createElement("div", { "data-native-navbar": title, hidden: true }, children)
|
|
20
20
|
}
|
|
21
21
|
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ruby-native/react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"description": "React components for Ruby Native",
|
|
5
5
|
"main": "index.js",
|
|
6
|
-
"files": ["index.js"],
|
|
6
|
+
"files": ["index.js", "README.md"],
|
|
7
7
|
"peerDependencies": {
|
|
8
8
|
"react": ">=18",
|
|
9
9
|
"@inertiajs/react": ">=2"
|