JsonInput
Capture json data from user
Import
Source
Docs
Package
Usage
JsonInput is based on Textarea component, it includes json validation logic and option to format input value:
<JsonInputlabel="Your package.json"placeholder="Textarea will autosize to fit the content"validationError="Invalid json"formatOnBlurautosizeminRows={4}/>
Controlled
import { useState } from 'react';import { JsonInput } from '@mantine/core';function Demo() {const [value, setValue] = useState('');return <JsonInput value={value} onChange={setValue} />;}
Input props
Component supports all props from Input and InputWrapper components:
Radius
Size
<JsonInputplaceholder="Your package.json"label="Your package.json"required/>
Get element ref
You can get textarea ref with elementRef prop:
import { useRef } from 'react';import { JsonInput } from '@mantine/core';function Demo() {const ref = useRef(null);return <JsonInput elementRef={ref} />;}
Server side rendering
Component uses use-id hook to generate unique ids and aria- attributes,
provide static id prop to prevent props mismatch:
<JsonInput /> // -> random id generated both on client and server, props mismatch warning<JsonInput id="my-json" /> // -> id is static, no mismatches
Accessibility
Provide aria-label in case you use component without label for screen reader support:
<JsonInput label="My json" />; // -> ok, textarea and label is connected<JsonInput />; // not ok, textarea is not labeled<JsonInput aria-label="My json" />; // -> ok, label is not visible but will be announced by screen reader
Built by Vitaly Rtishchev and these awesome people