react json editor ajrm
Locale Support & Other
Peringatan:
Seperti yang mungkin sudah Anda ketahui, proyek asli react-json-editor-ajrm tidak dikelola secara aktif dan pada akhirnya tidak akan digunakan lagi. Jadi saya memutuskan untuk menetapkan tanggal resmi penghentian. Tanggal tentatifnya adalah 15 Juni 2023.
Saya ingin mengucapkan terima kasih kepada mereka yang menggunakannya dalam proyek mereka dan mereka yang telah berkontribusi pada proyek ini. Saya tidak ingin lagi mempertahankan proyek ini. Itu dibuat pada masa-masa awal karir insinyur perangkat lunak saya, dan belum memenuhi standar saat ini maupun standar saya.
Tapi jangan khawatir. Saya bermaksud memberikan kehidupan baru ke dalam proyek ini dengan menulis ulang dari awal.
Saya ingin mengambil pembelajaran dari masa lalu, dan menghindari beberapa masalah yang dialami react-json-editor-ajrm saat ini. Saya juga ingin menyoroti hal-hal yang telah dilakukan dengan baik, dan saya ingin melanjutkannya.
Saya telah menyiapkan rumah untuk proyek baru ini di sini enio. Saya juga telah menyiapkan diskusi di sini jika Anda memiliki pertanyaan atau komentar.
Komponen reaksi yang bergaya, seperti editor, modular, untuk melihat, mengedit, dan men-debug sintaks objek javascript!
$ npm i --save react-json-editor-ajrm
import JSONInput from 'react-json-editor-ajrm';
import locale from 'react-json-editor-ajrm/locale/en';
<JSONInput
id = 'a_unique_id'
placeholder = { sampleObject }
colors = { darktheme }
locale = { locale }
height = '550px'
/>
Petunjuk : Ada dua jalur root yang berbeda: react-json-editor-ajrm dan react-json-editor-ajrm/es . Yang pertama berisi kode ES5 polyfilled, ES6 kedua yang tidak polyfilled. Versi react-json-editor-ajrm/es tidak kompatibel dengan create-react-app . Jika Anda tidak yakin mana yang Anda butuhkan/inginkan, pilih yang pertama - yang memiliki kompatibilitas terbaik dengan alat dan browser.
Folder ./examples berisi dua contoh:
$ cd path/to/repo/react-json-editor-ajrm/example/webpack-project
$ npm i
$ npm start
http://localhost:8080 di peramban web placeholder untuk ditampilkan setelah komponen dipasang.English , German , Spanish , Chinese , French , Indonesian , Russian , Hindi , Japanese dan Tamil . | Nama | Keterangan | Jenis | Diperlukan |
|---|---|---|---|
| lokal | Lokal editor Anda. Impor lokal seperti ini: import locale from 'react-json-editor-ajrm/locale/en' . Pelajari Lebih Lanjut | obyek | Wajib |
| pengenal | id opsional untuk ditetapkan ke simpul DOM masukan teks aktual. Selain dari input teks, node berikut juga akan menerima id: {id}-outer-box , {id}-container , {id}-warning-box , {id}-labels | rangkaian | Opsional |
| pengganti | Kirim objek javascript yang valid untuk ditampilkan setelah komponen dipasang. Tetapkan nilai yang berbeda agar konten awal komponen dirender ulang. | obyek | Opsional |
| mengatur ulang | Kirimkan true agar komponen selalu dirender ulang atau 'direset' ke nilai yang diberikan pada properti placeholder . | boolean | Opsional |
| hanya lihat | Kirimkan true jika Anda ingin konten ditampilkan tidak dapat diedit. | boolean | Opsional |
| di Perubahan | Setiap kali acara onKeyPress berlangsung, nilai konten akan dikembalikan. | obyek | Opsional |
| diBlur | Setiap kali acara onBlur berlangsung, itu akan mengembalikan nilai konten. | obyek | Opsional |
| konfirmasiBaik | Kirim false jika Anda ingin tanda centang untuk mengonfirmasi sintaks yang baik disembunyikan. | boolean | Opsional |
| tinggi | Properti singkatan untuk menyetel ketinggian tertentu untuk seluruh komponen. | rangkaian | Opsional |
| lebar | Properti singkatan untuk menyetel lebar tertentu untuk seluruh komponen. | rangkaian | Opsional |
| diKeyPressUpdate | Kirim false jika Anda ingin komponen tidak diperbarui secara otomatis saat tombol ditekan. | boolean | Opsional |
| tungguSetelahKeyPress | Jumlah milidetik yang harus ditunggu sebelum merender ulang konten setelah penekanan tombol. Nilai defaultnya adalah 1000 bila tidak ditentukan. Dengan kata lain, komponen akan diperbarui jika tidak ada penekanan tombol tambahan setelah yang terakhir dalam waktu 1 detik. Kurang dari 100 milidetik tidak ada bedanya. | nomor | Opsional |
| memodifikasiErrorText | Fungsi khusus untuk mengubah teks peringatan asli komponen. Fungsi ini akan menerima satu parameter bertipe string dan harus mengembalikan string secara sama. | fungsi | Opsional |
| kesalahan | Berisi properti berikut: | obyek | Opsional |
| kesalahan.alasan | String yang berisi pesan kesalahan khusus | rangkaian | Opsional |
| error.line | Nomor yang menunjukkan nomor baris yang terkait dengan pesan kesalahan khusus | nomor | Opsional |
| tema | Tentukan tema bawaan mana yang akan digunakan. | rangkaian | Opsional |
| warna | Berisi properti berikut: | obyek | Opsional |
| warna.default | Kode warna hex untuk simbol apa pun, seperti braces kurawal, dan comma . | rangkaian | Opsional |
| warna.string | Kode warna hex untuk token yang diidentifikasi sebagai nilai string . | rangkaian | Opsional |
| warna.nomor | Kode warna hex untuk token yang diidentifikasi sebagai nilai integeter , double , atau float . | rangkaian | Opsional |
| warna.titik dua | Kode warna hex untuk token diidentifikasi sebagai colon . | rangkaian | Opsional |
| warna.kunci | Kode warna hex untuk token yang diidentifikasi sebagai keys atau nama properti. | rangkaian | Opsional |
| warna.keys_whiteSpace | Kode warna hex untuk token yang diidentifikasi sebagai keys yang dibungkus dengan tanda kutip. | rangkaian | Opsional |
| warna.primitif | Kode warna hex untuk token diidentifikasi sebagai nilai boolean dan null. | rangkaian | Opsional |
| warna.kesalahan | Kode warna hex untuk token yang ditandai dengan tag error . | rangkaian | Opsional |
| warna.latar belakang | Kode warna hex untuk latar belakang komponen. | rangkaian | Opsional |
| warna.background_warning | Kode warna hex untuk pesan peringatan yang ditampilkan di bagian atas komponen. | rangkaian | Opsional |
| gaya | Berisi properti berikut: | obyek | Opsional |
| style.outerBox | Properti untuk mengubah gaya default div kontainer luar komponen. | obyek | Opsional |
| gaya.wadah | Properti untuk mengubah gaya default container komponen. | obyek | Opsional |
| style.warningBox | Properti untuk mengubah gaya default div kontainer dari pesan peringatan. | obyek | Opsional |
| gaya.errorMessage | Properti untuk mengubah gaya default pesan peringatan. | obyek | Opsional |
| gaya.tubuh | Properti untuk mengubah gaya default div penampung label baris dan kode. | obyek | Opsional |
| gaya.labelKolom | Properti untuk mengubah gaya default div penampung label baris. | obyek | Opsional |
| gaya.label | Properti untuk mengubah gaya default setiap label baris. | obyek | Opsional |
| gaya.contentBox | Properti untuk mengubah gaya default div kontainer kode. | obyek | Opsional |
outerBox
+-- container
+--- warningBox
+---- errorMessage
+--- body
+---- labelColumn
+----- labels
+---- contentBox
+----- auto generated markup
Setiap kali RJEA merender ulang kontennya, fungsi apa pun yang diteruskan ke properti onChange akan menerima parameter objek tunggal dengan kunci dan nilai berikut:
| Kunci | Keterangan |
|---|---|
| teks biasa | Representasi string dari konten yang mencakup linebreak dan indentasi. Bagus untuk console.log() |
| markupTeks | Representasi string dari markup yang dibuat secara otomatis yang digunakan untuk merender konten. |
| json | Versi konten JSON.stringify. |
| jsObject | Versi konten javascript object . Akan mengembalikan undefined jika sintaksis konten salah. |
| garis | Jumlah baris yang dirender agar konten dapat ditampilkan. |
| kesalahan | Mengembalikan false kecuali sintaksis konten salah, dalam hal ini mengembalikan objek dengan token dan nomor line yang sesuai dengan lokasi terjadinya kesalahan dan reason |
RJEA mendukung tema bawaan. Ini daftarnya.
Proyek ini dilisensikan di bawah Lisensi MIT - lihat file LICENSE.md untuk detailnya.
Terima kasih kepada orang-orang hebat ini?:
Andrew Redikan ? ? | Patrick Sachs ? | Alan Kehl ? | esbenvb | Markus Petrykowski | Rick Brunstedt | Kucing Kotor ? |
Cédric ? | Radit ? | asketes ? | CGVedant ? | Shehbaz Jafri ? | Vasantha Kumar RB ? | Aditya Periwal ? |
Alexei Lyakhov | Terence Huynh | Richard Hull | tonguyenit18 |
Proyek ini mengikuti spesifikasi semua kontributor. Kontribusi apa pun diterima!
