React Json View: JSON preglednik za React
react-json-view
RJV je React komponenta za prikaz i uređivanje javascripta nizovi i JSON objekti .
Ova komponenta pruža responzivno sučelje za prikaz nizova ili JSON-a u web pregledniku. NPM nudi distribuciju izvora koji je transpiliran u ES5; tako da možete uključiti ovu komponentu sa bilo koju web-baziranu javascript aplikaciju .
Pogledajte interaktivni demo
Primjer implementacije
|_+_|Primjeri izlaza
Zadana tema
Tema hopscotch, s ikonama trokuta:
Upute za instalaciju
Instalirajte ovu komponentu s NPM-om.
|_+_|Ili dodajte konfiguracijskoj datoteci package.json:
|_+_|Rekviziti
| Ime | Tip | Zadano | Opis |
|---|---|---|---|
| |_+_| | |_+_| | Nijedan | Ovo svojstvo sadrži vaš unos JSON |
| |_+_| | |_+_| ili |_+_| | 'korijen' | Sadrži naziv vašeg korijenskog čvora. Koristite |_+_| ili |_+_| bez imena. |
| |_+_| | |_+_| | 'rjv-zadano' | RJV podržava base-16 teme. Provjerite popis podržanih tema u demo verziji. Prilagođena tema 'rjv-default' primjenjuje se prema zadanim postavkama. |
| |_+_| | |_+_| | |_+_| | Atributi stila za spremnik react-json-view. Eksplicitni atributi stila nadjačat će atribute koje pruža tema. |
| |_+_| | |_+_| | 'krug' | Stil proširivanja/sažimanja ikona. Prihvaćene vrijednosti su 'krug', trokut' ili 'kvadrat'. |
| |_+_| | |_+_| | 4 | Postavite širinu uvlake za ugniježđene objekte |
| |_+_| | |_+_| ili |_+_| | |_+_| | Kada se postavi na |_+_|, svi će čvorovi prema zadanim postavkama biti sažeti. Koristite cjelobrojnu vrijednost za sažimanje na određenoj dubini. |
| |_+_| | |_+_| | |_+_| | Kada se dodijeli cjelobrojna vrijednost, nizovi će biti odrezani na toj duljini. Nakon sažetih nizova slijedi elipsa. Sadržaj niza može se proširiti i sažeti klikom na vrijednost niza. |
| |_+_| | |_+_| | |_+_| | Funkcija povratnog poziva za kontrolu nad objektima i nizovima koji se prema zadanim postavkama trebaju sažeti. Objekt se prosljeđuje povratnom pozivu koji sadrži |_+_|, |_+_|, |_+_| ('niz' ili 'objekt') i |_+_|. |
| |_+_| | |_+_| | |_+_| | Kada je dodijeljena cjelobrojna vrijednost, nizovi će biti prikazani u grupama prema broju vrijednosti. Grupe su prikazane u zagradama i mogu se proširiti i sažeti klikom na zagrade. |
| |_+_| | |_+_| ili |_+_| | |_+_| | Kada prop nije |_+_|, korisnik može kopirati objekte i nizove u međuspremnik klikom na ikonu međuspremnika. Podržani su povratni pozivi za kopiranje. |
| |_+_| | |_+_| | |_+_| | Kada je postavljeno na |_+_|, objekti i nizovi označeni su veličinom |
| |_+_| | |_+_| | |_+_| | Kada je postavljeno na |_+_|, oznake tipa podataka predstavljaju prefiks vrijednosti |
| |_+_| | |_+_| | |_+_| | Kada se proslijedi funkcija povratnog poziva, |_+_| funkcionalnost je omogućena. Povratni poziv se poziva prije dovršetka uređivanja. Povratak |_+_| od |_+_| spriječit će promjenu. vidi: onEdit docs |
| |_+_| | |_+_| | |_+_| | Kada se proslijedi funkcija povratnog poziva, |_+_| funkcionalnost je omogućena. Povratni poziv se poziva prije dovršetka dodavanja. Povratak |_+_| od |_+_| spriječit će promjenu. vidi: onAdd docs |
| |_+_| | |_+_| | |_+_| | Postavlja zadanu vrijednost koja će se koristiti prilikom dodavanja stavke u json |
| |_+_| | |_+_| | |_+_| | Kada se proslijedi funkcija povratnog poziva, |_+_| funkcionalnost je omogućena. Povratni poziv se poziva prije dovršetka brisanja. Povratak |_+_| od |_+_| spriječit će promjenu. vidi: onDelete docs |
| |_+_| | |_+_| | |_+_| | Kada je funkcija proslijeđena, klik na vrijednost pokreće |_+_| metoda koju treba pozvati. |
| |_+_| | |_+_| | |_+_| | postavite na true za sortiranje ključeva objekta |
| |_+_| | |_+_| | |_+_| | postavite na false za uklanjanje navodnika iz ključeva (npr. |_+_| naspram |_+_|) |
| |_+_| | |_+_| | 'Pogreška provjere' | Prilagođena poruka za neuspjele provjere valjanosti za |_+_|, |_+_| ili |_+_| povratni pozivi |
| |_+_| | |_+_| | |_+_| | Kada je postavljeno na |_+_|, indeks vrijednosti prefiksa elemenata |
Značajke
- |_+_|, |_+_| i |_+_| rekviziti omogućuju korisnicima uređivanje |_+_| varijabla
- Vrijednosti objekata, nizova, nizova i funkcija mogu se sažeti i proširiti
- Objekt i čvorovi polja prikazuju duljinu
- Čvorovi objekata i polja podržavaju značajku 'Kopiraj u međuspremnik'.
- Vrijednosti niza mogu se skratiti nakon određene duljine
- Nizovi se mogu podgrupirati nakon određene duljine
- Podrška za temu Base-16
- Kada |_+_| je omogućeno:
- |_+_| Način uređivanja
- |_+_| podnijeti
Prilagodba stila
Stock teme
RJV sada podržava base-16 teme!
Možete navesti |_+_| ime ili objekt kada instancirate svoju rjv komponentu.
|_+_|Provjerite popis podržanih tema u demonstraciji komponente.
Primjer Monokai teme
flutter desktop vs electron
Primjer solarizirane teme
Koristite svoju vlastitu temu
Možete dostaviti vlastiti objekt teme Base-16.
Da biste bolje razumjeli prilagođene teme, pogledajte moju primjernu implementaciju i smjernice za oblikovanje teme base-16.
Interakcija onEdit, onAdd i onDelete
Proslijedite metode povratnog poziva |_+_|, |_+_| i |_+_| rekviziti. Vaša metoda će biti pozvana kada korisnik pokuša ažurirati vaše |_+_| objekt.
Sljedeći objekt bit će proslijeđen vašoj metodi:
|_+_|Povratak |_+_| iz metode povratnog poziva spriječit će utjecaj na src.
Doprinos izvornom kodu
Pokrenite Dev Server
|_+_|Webpack Dev Server trebao bi automatski otvoriti http://localhost:2000 u vašem web pregledniku. Ako se ne dogodi, otvorite preglednik i idite na port 2000. Hot reloader će se automatski ponovno učitati kada se datoteke izmijene u |_+_| imenik.
Pokrenite proizvodnu izgradnju
|_+_|Dodajte testove za svoj kod prije objavljivanja zahtjeva za povlačenje.
Možete pokrenuti testni paket s |_+_| ili |_+_| za automatsko ponovno učitavanje kada se datoteke mijenjaju.
Docker alati
Preporučam korištenje dockera za razvoj jer osigurava dosljednost okruženja.
Za informacije o doprinosu s Dockerom, pogledajte README u ./docker.
Inspiracija
Izvukao sam tonu dizajnerskih ideja iz react-json-tree. Hvala suradnicima RJT-a što su sastavili sjajnu komponentu!
Također me inspiriraju korisnici koji dolaze sa zanimljivim zahtjevima za značajke. Obratite mi se s idejama za ovaj projekt ili druge projekte na kojima želite surađivati. Moja adresa e-pošte navedena je na mojoj github korisničkoj stranici.
Autor: mac-s-g
Izvorni kod: https://github.com/mac-s-g/react-json-view
Licenca: MIT licenca
#reagirajte-domaći #reagirajte