JsonInput

Textarea with JSON validation and formatting

Import: import { JsonInput } from 'react-native-mantine';

Usage

import { JsonInput } from 'react-native-mantine';

<JsonInput
  label="Package config"
  placeholder='{"key": "value"}'
  validationError="Invalid JSON"
  formatOnBlur
  minRows={4}
  value={value}
  onChangeText={setValue}
/>

Props

Prop	Type	Default	Description
`value`	`string`		Value for controlled component
`defaultValue`	`string`		Default value for uncontrolled component
`onChangeText`	`(value: string) => void`		Called when value changes
`validationError`	`React.ReactNode`	`"Invalid JSON"`	Error message displayed when the value cannot be parsed
`formatOnBlur`	`boolean`	`false`	Determines whether valid JSON should be pretty-printed on blur
`serialize`	`typeof JSON.stringify`	`JSON.stringify`	Function to serialize value into a string
`deserialize`	`typeof JSON.parse`	`JSON.parse`	Function to deserialize string value
`label`	`React.ReactNode`		Input label, inherited from Textarea
`description`	`React.ReactNode`		Input description, inherited from Textarea
`error`	`React.ReactNode`		Error message, takes precedence over validationError
`minRows`	`number`	`3`	Minimum number of visible text lines, inherited from Textarea
`maxRows`	`number`		Maximum number of visible text lines, inherited from Textarea
`autosize`	`boolean`	`false`	Auto-grow textarea to fit content, inherited from Textarea

Source on GitHub · npm