NXDOM

Nxdom Framework

Nusantara eXtreme Development Object Model — dokumentasi resmi

Modal — formulir dalam overlay

Hook useModal dari NexaJS merender dialog modal saat visible benar, dengan judul, konten anak, dan callback onClose / onSave. Demo memakai TextInput dan TouchableOpacity dari NexaJS untuk formulir sederhana nama–email.

  1. Pendaftaran route — "Modal" (judul: "Modal").
  2. Navigasi — navigation.navigate("Modal"). MenuComponents.
  3. Render — Tombol buka mengatur visible; useModal({...}) dipanggil di JSX dan mengembalikan node modal; konten formulir sebagai children.
import { useState, View, Text, TextInput, TouchableOpacity, useModal } from "NexaJS"; export default function Screen() { const [visible, setVisible] = useState(false); const Body = () => ( <View style={{ padding: 20 }}> <TextInput placeholder="Nama" style={{ borderWidth: 1, marginBottom: 12, padding: 8 }} /> </View> ); return ( <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}> <TouchableOpacity onPress={() => setVisible(true)}> <Text>Buka modal</Text> </TouchableOpacity> {useModal({ visible, onClose: () => setVisible(false), onSave: () => setVisible(false), title: "Judul", children: <Body />, })} </View> ); }
  • visible, onClose, onSave, title, children.
  • Reset state formulir di onClose agar data tidak tertinggal seperti pada referensi.
  • Validasi input sebelum onSave.