A simple and efficient JSON editor component for React applications.
npm install @fieldreports/json-editor-react
bash
npm i @fieldreports/json-editor-react
`
Usage
`jsx
import JsonTreeEditor from '@fieldreports/json-editor-react';
function App() {
const data = {
name: "John Doe",
age: 30,
isActive: true,
address: {
city: "New York",
zip: "10001"
},
hobbies: ["reading", "coding"]
};
const handleSave = (updatedData) => {
console.log('Data saved:', updatedData);
};
return (
initialData={data}
fileName="user-data.json"
onSave={handleSave}
onClose={() => console.log('Editor closed')}
userRole="Admin"
/>
);
}
`
Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| initialData | any | required | JSON object to display and edit |
| fileName | string | "data.json" | Display name for the file |
| onSave | (data: any) => void | undefined | Callback when save button is clicked |
| onClose | () => void | undefined | Callback for close button |
| userRole | string | "User" | User role for permissions (only "Admin" can edit) |
| customUserId | string | undefined | Custom user ID for header updates |
| customUsername | string | undefined | Custom username for header updates |
Features in Detail
$3
When editing values, the component maintains the original data type:
- Strings remain strings
- Numbers remain numbers
- Booleans remain booleans
- Arrays and objects can be edited as JSON
Styling
The component uses Tailwind CSS classes. Make sure your project has Tailwind CSS configured, or the component will use inline styles as fallback.
#### Container & Layout
| Prop | Description |
|------|-------------|
| className | Main container styling |
| headerClassName | Header section styling |
| footerClassName | Footer section styling |
| contentClassName | Content area styling |
| treeClassName` | Tree container styling |