J
json-render-react
React renderer for json-render that turns JSON specs into React components. Use when working with @json-render/react, building React UIs from JSON, creating component catalogs, or rendering AI-generated specs.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
React renderer for json-render that turns JSON specs into React components. Use when working with @json-render/react, building React UIs from JSON, creating component catalogs, or rendering AI-generated specs.
How to use
- Zainstaluj pakiet @json-render/react oraz @json-render/core i zod jako zależności projektu React. 2. Utwórz katalog komponentów za pomocą defineCatalog, gdzie dla każdego komponentu podasz schemat propsów (z.object) i opis. Na przykład Button z labelą i wariantem, Card z tytułem. 3. Zdefiniuj implementacje komponentów za pomocą defineRegistry, przekazując katalog i obiekty z rzeczywistymi komponentami React — każdy otrzyma props i children. 4. W komponencie App lub głównym pliku importuj Renderer i przekaż mu spec (JSON-ową strukturę) oraz registry. Renderer automatycznie zmapuje typ z JSON-u na odpowiedni komponent z katalogu. 5. Struktura JSON powinna zawierać root z type (nazwa komponentu), props (wartości dla schematu) i children (zagnieżdżone komponenty). 6. Renderuj komponent App z JSON-ową specyfikacją — Renderer obsłuży resztę, walidując propsy względem schematów.