# React Renderer

## Description
React renderer for json-render that turns JSON specs
into React components.

## When to use
- Working with @json-render/react
- Building React UIs from JSON specifications
- Creating component catalogs from JSON definitions

## Usage
```jsx
import { render } from '@json-render/react';

const spec = {
  type: 'Card',
  props: { title: 'Hello' },
  children: [
    { type: 'Text', props: { value: 'World' } }
  ]
};

const App = () => render(spec);
```

## Configuration
- `strict`: Enable strict type checking (default: true)
- `components`: Custom component registry map
- `fallback`: Fallback component for unknown types

## Supported Components
Button, Card, Text, Input, List, Grid, Modal, Tabs

# Basic Examples

## Simple Card
```json
{
  "type": "Card",
  "props": {
    "title": "Welcome",
    "variant": "outlined"
  },
  "children": [
    {
      "type": "Text",
      "props": { "value": "Hello, World!" }
    }
  ]
}
```

## Button Group
```json
{
  "type": "ButtonGroup",
  "props": { "direction": "horizontal" },
  "children": [
    {
      "type": "Button",
      "props": { "label": "Save", "variant": "primary" }
    },
    {
      "type": "Button",
      "props": { "label": "Cancel", "variant": "secondary" }
    }
  ]
}
```

## Form with Input
```json
{
  "type": "Form",
  "props": { "onSubmit": "handleSubmit" },
  "children": [
    {
      "type": "Input",
      "props": {
        "name": "email",
        "label": "Email Address",
        "type": "email",
        "required": true
      }
    }
  ]
}
```