Examples

This section provides practical examples of using React JSONR in various scenarios. Each example demonstrates different features and use cases of the library.

All examples in this section use the following common components:

// Form component
const Form = ({ title, children, ...props }) => (
  <form {...props}>
    <h2>{title}</h2>
    <div className="form-body">{children}</div>
  </form>
);
 
// Input component
const Input = ({ label, name, type = 'text', ...props }) => (
  <div className="form-group">
    <label htmlFor={name}>{label}</label>
    {type === 'textarea' ? (
      <textarea id={name} name={name} {...props} />
    ) : (
      <input id={name} name={name} type={type} {...props} />
    )}
  </div>
);
 
// Button component
const Button = ({ label, type = 'button', ...props }) => (
  <button type={type} {...props}>{label}</button>
);
 
// Text component
const Text = ({ text, ...props }) => <p {...props}>{text}</p>;

These components are registered in a component registry for use with React JSONR:

import { createRegistry } from 'react-jsonr';
 
const registry = createRegistry({
  Form,
  Input,
  Button,
  Text
  // All HTML elements are automatically included
});

Examples

Available Examples

Contact Form

Dynamic User Profile

Plugin Usage

Interactive Traversal

Advanced Patterns

Example Components

On this page