- pointer: JSON Pointer to the desired sub schema that will be rendered.
- data: An object, as the one passed as parameter to the onSubmit function.

Return

Returns the data indicated by the pointer inside an instance of a JSON Schema the object. Or undefined if the pointer is not found.

Example

`JSX
// Suppose you have a schema with the following format:
const schema = {
type: 'object',
properties: {
address: {
type: 'object',
properties: {
name: { type: 'string' }
}
}
}
}

// A valid instance of this schema is this:
const data = {
address: {
name: "Foo"
}
}

// And suppose you have a pointer to a sub schema only:
const pointer = '#/properties/address/properties/name'

// Use this function to get the data from the instance of the schema(data) that
// coincides with the sub schema the pointer points to.
const result = getDataFromPointer(pointer, data) // returns "Foo"
`

Hooks API

The following are the common fields returned in the object from every use'SomeInputType' hook:

- type: The type of the input, as defined in InputTypes:
- generic: the default type, a non specialized type, only contains the common fields
- radio: Type used for
- select: Type used for
- input: Type used for generic
- textArea: Type used for <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> - </code>checkbox<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Type used for </code><input type='checkbox' \><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>pointer<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: JSON Pointer to sub schema that should be validated. The pointer is always in the form: </code>#/properties/some/properties/data<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> where </code>#<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> represents the root of the schema, and the </code>properties/some/properties/data<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> represents the tree of objects (from </code>some<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to </code>data<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) to get to the desired field, which in this case is </code>data<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. Also see the definition of JSON Pointers on <a href="https://tools.ietf.org/html/rfc6901" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">RFC 6901</a>.<br />- </code>name<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: The last object/data field name in the tree. In the case of the JSONSchema pointer </code>#/properties/child/properties/here<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> the name value will be </code>here<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br />- </code>isRequired<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: indicates whether the field is required or not.<br />- </code>validator<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: is the object passed to </code>react-hook-form<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to validate the form. See the <a href="https://github.com/react-hook-form/react-hook-form" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>react-hook-form<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a> for more information<br />- </code>formContext<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: If you want to access internal </code>react-hook-form<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> context use this<br />- </code>getError()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Returns an </code>ErrorMessage<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, which has the following format:<br /> - </code>{message: ErrorTypes, expected: ErrorMessageValues}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> - <strong></code>ErrorTypes<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong>, is an enum, with the following keys:<br /> - </code>required<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: the field is required to be filled. Value is </code>__form_error_required__<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br /> - </code>maxLength<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: maximum length of string input was surpassed. Value is </code>__form_error_maxLength__<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br /> - </code>minLength<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: minimum length of string input was not met. Value is </code>__form_error_minLength__<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br /> - </code>maxValue<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: maximum value of number input was surpassed. Value is </code>__form_error_maxValue__<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br /> - </code>minValue<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: minimum value of number input was not met. Value is </code>__form_error_minValue__<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br /> - </code>pattern<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: the pattern or type defined in the schema was not met. Value is </code>__form_error_pattern__<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br /> - </code>notInteger<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: the input was expected to be an integer but is not. Value is </code>__form_error_notInteger__<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br /> - </code>notFloat<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: the input was expected to be a float but is not. Value is </code>__form_error_notFloat__<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br /> - </code>multipleOf<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: the number is not a multiple of the number defined in the schema. Value is </code>__form_error_multipleOf__<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br /> - </code>notInEnum<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: the input does not match any of the expected values defined in the </code>enum<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> option in the schema. Value is </code>__form_error_notInEnum__<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br /> - </code>undefinedError<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: the error type could not be defined. Value is </code>__form_error_undefinedError__<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br /> - <strong></code>ErrorMessageValues<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong>, is the expected value to be met, it will be </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for required, and the minimum value expected for </code>minValue<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for example.<br />- </code>getObject()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Returns the data field in the schema that this input refers to</p><p class="my-3"><strong>Please notice that in all of the following examples it is assumed the components are already children of a </code>FormContext<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> component</strong></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"><strong>Description</strong></p><p class="my-3">Use this hook to build a single or multiple checkbox field in your form.</p><p class="my-3"><strong>Parameters:</strong></p><p class="my-3">- </code>pointer<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: JSON Pointer to the desired sub schema that will be rendered.</p><p class="my-3"><strong>Return:</strong></p><p class="my-3">Returns an object with the following fields, besides the common one's:</p><p class="my-3">- </code>isSingle<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: indicates whether there is just a single option inside the checkbox<br />- </code>getItems()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: use this to get which values should be listed inside the radio input fields. This function derives the items by the defined type and properties inside the JSON Schema and returns all the required items to comply with the definition.<br />- </code>getItemInputProps(index)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: use this with the spread operator inside an </code><input><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tag and get the benefit of the validator, id field, name and an associated label with it for the item in the specified index from </code>getItems()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>getItemLabelProps(index)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: the label props related to the input at the specified index from </code>getItems()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>Example:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">JSX<br />function InputField(props) {<br /> const inputMethods = useCheckbox(props.pointer)</p><p class="my-3"> return (<br /> <React.Fragment><br /> {inputMethods.getItems().map((value, index) => {<br /> return (<br /> <label {...inputMethods.getItemLabelProps(index)} key={</code>${value}${index}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">}><br /> {inputMethods.isSingle ? inputMethods.getObject().title : value}<br /> <input {...inputMethods.getItemInputProps(index)} /><br /> </label><br /> )<br /> })}<br /> {inputMethods.getError() && <p>This is an error!</p>}<br /> </React.Fragment><br /> )<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"><strong>Description</strong></p><p class="my-3">Use this hook to build a hidden field in the form, the user will not be able to change it or see it, but it will be there when submitted.</p><p class="my-3"><strong>Parameters:</strong></p><p class="my-3">- </code>pointer<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: JSON Pointer to the desired sub schema that will be rendered.</p><p class="my-3"><strong>Return:</strong></p><p class="my-3">Returns an object with the following fields, besides the common one's:</p><p class="my-3">- </code>getLabelProps()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: use this with the spread operator inside a </code><label><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tag and get the benefit of having all the important fields of the label filled in for you and the associated input (the </code>for<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property) with it.<br />- </code>getInputProps()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: use this with the spread operator inside an </code><input><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tag and get the benefit of the validator, id field, name and an associated label with it</p><p class="my-3"><strong>Example:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">JSX<br />function HiddenField(props) {<br /> const inputMethods = useHidden('#/properties/Foo');</p><p class="my-3"> return (<br /> <React.Fragment><br /> <label {...inputMethods.getLabelProps()}><br /> {inputMethods.name}<br /> </label><br /> <input {...inputMethods.getInputProps()} /><br /> </React.Fragment><br /> )<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"><strong>Description</strong></p><p class="my-3">Use this hook to build a generic input field in your form, with validation based on the type of input the JSON Schema requires.</p><p class="my-3"><strong>Parameters:</strong></p><p class="my-3">- </code>pointer<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: JSON Pointer to the desired sub schema that will be rendered.</p><p class="my-3"><strong>Return:</strong></p><p class="my-3">Returns an object with the following fields, besides the common one's:</p><p class="my-3">- </code>getLabelProps()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: use this with the spread operator inside a </code><label><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tag and get the benefit of having all the important fields of the label filled in for you and the associated input (the </code>for<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property) with it.<br />- </code>getInputProps()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: use this with the spread operator inside an </code><input><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tag and get the benefit of the validator, id field, name and an associated label with it.</p><p class="my-3"><strong>Example:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">JSX<br />function InputField(props) {<br /> const inputMethods = useInput('#/properties/Foo');</p><p class="my-3"> return (<br /> <React.Fragment><br /> <label {...inputMethods.getLabelProps()}><br /> {inputMethods.name}<br /> </label><br /> <input {...inputMethods.getInputProps()} /><br /> </React.Fragment><br /> )<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"><strong>Description</strong></p><p class="my-3">This hook works a little differently than the others. </code>useObject<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> returns an array of which each of its elements corresponds to the return type of one of the other hooks.</p><p class="my-3"><strong>Parameters:</strong></p><p class="my-3">- </code>pointer<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: JSON Pointer to the desired sub schema that will be rendered.<br />- </code>UISchema<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (Optional): This UISchema is a modified schema type, relative to the sub schema passed in the </code>pointer<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> prop, the format of the UISchema is the following:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />const UISchema = {<br /> /*<br /> * This is the type that will be used to choose what type of input will be<br /> * used to build the specified field. Please note that the type of a node<br /> * that is an object will be ignored, as there would make no sense to render<br /> * an object without it's children inside a form.<br /> */<br /> type: UITypes,<br /> properties: {<br /> // Note that the definition is recursive<br /> child1NameHere: UISchema,<br /> child2NameHere: UISchema,<br /> // ...<br /> childXNameHere: UISchema,<br /> },<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">- The <strong></code>UITypes<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong> is an enum with the following values:<br /> - </code>default<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: input will have a default type based on what react-hook-form-jsonschema thinks is better.<br /> - </code>radio<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: input will be of the radio type, just as returned by the </code>useRadio<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> hook<br /> - </code>select<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: input will be of the select type, just as returned by the </code>useSelect<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> hook<br /> - </code>input<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: input will be of the input type, just as returned by the </code>useInput<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> hook<br /> - </code>hidden<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: input will be of the hidden type, just as returned by the </code>useHidden<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> hook<br /> - </code>password<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: input will be of the password type, just as returned by the </code>usePassword<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> hook<br /> - </code>textArea<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: input will be of the textarea type, just as returned by the </code>useTextArea<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> hook<br /> - </code>checkbox<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: input will be of the checkbox type, just as returned by the </code>useCheckbox<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> hook</p><p class="my-3"><strong>Return:</strong></p><p class="my-3">Returns an array, with each element being the return of a different call to a hook for each child of the object that was passed in the pointer.</p><p class="my-3"><strong>Example:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">JSX<br />const personSchema = {<br /> title: 'Person',<br /> type: 'object',<br /> properties: {<br /> firstName: {<br /> type: 'string',<br /> description: "The person's first name.",<br /> },<br /> lastName: {<br /> type: 'string',<br /> description: "The person's last name.",<br /> },<br /> birthYear: {<br /> description: "The person's birth year.",<br /> type: 'integer',<br /> minimum: 1930,<br /> maximum: 2010,<br /> },<br /> },<br />}</p><p class="my-3">function SpecializedObject(props) {<br /> switch (props.baseObject.type) {<br /> case InputTypes.input: {<br /> return (<br /> <React.Fragment><br /> <label {...props.baseObject.getLabelProps()}><br /> {props.baseObject.name}<br /> </label><br /> <input {...props.baseObject.getInputProps()} /><br /> </React.Fragment><br /> )<br /> }<br /> case InputTypes.radio: {<br /> return (<br /> <React.Fragment><br /> <label {...props.baseObject.getLabelProps()}><br /> {props.baseObject.name}<br /> </label><br /> {props.baseObject.getItems().map((value, index) => {<br /> return (<br /> <label<br /> {...props.baseObject.getItemLabelProps(index)}<br /> key={</code>${value}${index}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">}<br /> ><br /> {value}<br /> <input {...props.baseObject.getItemInputProps(index)} /><br /> </label><br /> )<br /> })}<br /> </React.Fragment><br /> )<br /> }<br /> case InputTypes.select: {<br /> return (<br /> <React.Fragment><br /> <label {...props.baseObject.getLabelProps()}><br /> {props.baseObject.name}<br /> </label><br /> <select {...props.baseObject.getSelectProps()}><br /> {props.baseObject.getItems().map((value, index) => {<br /> return (<br /> <option<br /> {...props.baseObject.getItemOptionProps(index)}<br /> key={</code>${value}${index}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">}<br /> ><br /> {value}<br /> </option><br /> )<br /> })}<br /> </select><br /> </React.Fragment><br /> )<br /> }<br /> }<br /> return <React.Fragment></React.Fragment><br />}</p><p class="my-3">function ObjectRenderer(props) {<br /> const inputMethods = useObject({ pointer: props.pointer, UISchema: props.UISchema })</p><p class="my-3"> const objectForm = []</p><p class="my-3"> // Note that we also add error checking here and show a message in case there<br /> // is one. Remember that you can also check for the type of error returned<br /> // anb give a more specialized warning to the user.<br /> for (const obj of inputMethods) {<br /> objectForm.push(<br /> <div key={</code>${obj.type}${obj.pointer}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">}><br /> <SpecializedObject baseObject={obj} /><br /> {obj.getError() && <p>This is an error!</p>}<br /> </div><br /> )<br /> }</p><p class="my-3"> return <React.Fragment>{objectForm}</React.Fragment><br />}</p><p class="my-3">function RenderMyJSONSchema() {<br /> // Notice that even though only one child was specified, all the children of<br /> // the root object are rendered, using the choosen default for each field.<br /> const UISchema = {<br /> type: UITypes.default,<br /> properties: {<br /> birthYear: {<br /> type: UITypes.select,<br /> },<br /> },<br /> }</p><p class="my-3"> return (<br /> <FormContext schema={personSchema}><br /> <ObjectRenderer pointer="#" UISchema={UISchema} /><br /> </FormContext><br /> )<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">This is the result of this example:</p><p class="my-3"><img src="https://user-images.githubusercontent.com/19346539/72556402-48b35080-387d-11ea-92a0-8b5914462603.png" alt="useObject Example" width="200"/></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"><strong>Description</strong></p><p class="my-3">Use this hook to build a password input field in your form, with validation based on the type of input the JSON Schema requires.</p><p class="my-3"><strong>Parameters:</strong></p><p class="my-3">- </code>pointer<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: JSON Pointer to the desired sub schema that will be rendered.</p><p class="my-3"><strong>Return:</strong></p><p class="my-3">Returns an object with the following fields, besides the common one's:</p><p class="my-3">- </code>getLabelProps()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: use this with the spread operator inside a </code><label><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tag and get the benefit of having all the important fields of the label filled in for you and the associated input (the </code>for<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property) with it.<br />- </code>getInputProps()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: use this with the spread operator inside an </code><input><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tag and get the benefit of the validator, id field, name and an associated label with it</p><p class="my-3"><strong>Example:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">JSX<br />function PasswordField(props) {<br /> const inputMethods = usePassword('#/properties/Foo');</p><p class="my-3"> return (<br /> <React.Fragment><br /> <label {...inputMethods.getLabelProps()}><br /> {inputMethods.name}<br /> </label><br /> <input {...inputMethods.getInputProps()} /><br /> </React.Fragment><br /> )<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"><strong>Description</strong></p><p class="my-3">Use this hook to build a radio field in your form.</p><p class="my-3"><strong>Parameters:</strong></p><p class="my-3">- </code>pointer<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: JSON Pointer to the desired sub schema that will be rendered.</p><p class="my-3"><strong>Return:</strong></p><p class="my-3">Returns an object with the following fields, besides the common one's:</p><p class="my-3">- </code>getItems()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: use this to get which values should be listed inside the radio input fields. This function derives the items by the defined type and properties inside the JSON Schema and returns all the required items to comply with the definition.<br />- </code>getItemInputProps(index)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: use this with the spread operator inside an </code><input><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tag and get the benefit of the validator, id field, name and an associated label with it for the item in the specified index from </code>getItems()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>getItemLabelProps(index)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: the label props related to the input at the specified index from </code>getItems()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>Example:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">JSX<br />function InputField(props) {<br /> const inputMethods = useRadio('#/properties/Foo');</p><p class="my-3"> return (<br /> <React.Fragment><br /> {inputMethods.getItems().map((value, index) => {<br /> return (<br /> <label {...inputMethods.getItemLabelProps(index)} key={</code>${value}${index}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">}><br /> {value}<br /> <input {...inputMethods.getItemInputProps(index)} /><br /> </label><br /> )<br /> })}<br /> {inputMethods.getError() && <p>This is an error!</p>}<br /> </React.Fragment><br /> )<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"><strong>Description</strong></p><p class="my-3">Use this hook to build a select field in your form.</p><p class="my-3"><strong>Parameters:</strong></p><p class="my-3">- </code>pointer<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: JSON Pointer to the desired sub schema that will be rendered.</p><p class="my-3"><strong>Return:</strong></p><p class="my-3">Returns an object with the following fields, besides the common one's:</p><p class="my-3">- </code>getLabelProps()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: use this with the spread operator inside a </code><label><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tag and get the benefit of having all the important fields of the label filled in for you and the associated select (the </code>for<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property) with it.<br />- </code>getItems()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: use this to get all the values that are possible to be in the radio buttons<br />- </code>getItemOptionProps(index)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: use this with the spread operator inside an </code><option><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tag and get the benefit of the validator, id field and name for the item in the specified index from </code>getItems()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>getSelectProps()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: use this with the spread operator inside a </code><select><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tag to get validation and register it with the react-hook-form-jsonschema.</p><p class="my-3"><strong>Example:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">JSX<br />function InputField(props) {<br /> const inputMethods = useSelect('#/properties/Foo');</p><p class="my-3"> return (<br /> <React.Fragment><br /> <label {...inputMethods.getLabelProps()}>{inputMethods.name}</label><br /> <select {...inputMethods.getSelectProps()}><br /> {inputMethods.getItems().map((value, index) => {<br /> return (<br /> <option<br /> {...inputMethods.getItemOptionProps(index)}<br /> key={</code>${value}${index}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">}<br /> ><br /> {value}<br /> </option><br /> )<br /> })}<br /> </select><br /> {inputMethods.getError() && <p>This is an error!</p>}<br /> </React.Fragment><br /> )<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"><strong>Description</strong></p><p class="my-3">Use this hook to build a textarea field in the form.</p><p class="my-3"><strong>Parameters:</strong></p><p class="my-3">- </code>pointer<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: JSON Pointer to the desired sub schema that will be rendered.</p><p class="my-3"><strong>Return:</strong></p><p class="my-3">Returns an object with the following fields, besides the common one's:</p><p class="my-3">- </code>getLabelProps()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: use this with the spread operator inside a </code><label><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tag and get the benefit of having all the important fields of the label filled in for you and the associated input (the </code>for<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property) with it.<br />- </code>getTextAreaProps()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: use this with the spread operator inside an </code><textarea><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tag and get the benefit of the validator, id field, name and an associated label with it</p><p class="my-3"><strong>Example:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">JSX<br />function HiddenField(props) {<br /> const inputMethods = useTextArea('#/properties/Foo');</p><p class="my-3"> return (<br /> <React.Fragment><br /> <label {...inputMethods.getLabelProps()}><br /> {inputMethods.name}<br /> </label><br /> <textarea {...inputMethods.getTextAreaProps()} /><br /> </React.Fragment><br /> )<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Supported JSON Schema keywords</h2></p><p class="my-3">- </code>multipleOf<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>maximum<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>exclusiveMaximum<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>minimum<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>exclusiveMinimum<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>maxLength<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>minLength<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>pattern<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>items<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (does not support an array of schemas)<br />- </code>maxItems<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (for this one and </code>minItems<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> they are missing specific error messages)<br />- </code>minItems<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>required<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>enum<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>type<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (does not support array of types)<br />- </code>properties<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>$id<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>$ref<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Does not support fetching a JSON Schema from an URI (as per the draft this is optional).</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">TODO/Next Steps</h2></p><p class="my-3">- [ ] Improve array type support(and it's validation).<br />- [ ] Implement </code>dependencies<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> keyword for dynamic formularies.<br />- [ ] Implement </code>allOf<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>anyOf<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>oneOf<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>not<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for more liberty in creating form schemas.<br />- [ ] Implement built-in validation of </code>format<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> keyword for all possible formats.<br />- [ ] Maybe? Implement new input types for each, or similar, formats, like an </code>useDate<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for format </code>date-time<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- [ ] Implement </code>default<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> values.<br />- [ ] Implement </code>const` keyword.<br />- [ ] Warn user that there is an error in the schema if any of the keywords fails to validate against the expected type and format.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Useful resources</h2></p><p class="my-3">- <a href="https://tools.ietf.org/html/draft-wright-json-schema-01" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">JSON Schema Draft 6 Core</a>: Draft of the core JSONSchema, essential for implementing any new feature in the library<br />- <a href="https://tools.ietf.org/html/draft-wright-json-schema-validation-01" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">JSON Schema Draft 6 Validation</a>: Describes the schema keywords with how they shoul be handled, what they do, and how to validate against them, essential for implementing any new keyword<br />- <a href="https://tools.ietf.org/html/rfc6901" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">RFC 6901</a>: RFC of JSON Pointers.<br />- <a href="https://json-schema.org/understanding-json-schema/index.html" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Understanding JSON Schema</a> (Beware this is for Draft 7, but it is still a pretty good reference)<br />- <a href="https://json-schema.org/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">JSON Schema Website</a><br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"2b:[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1\",\"children\":[[\"$\",\"$L5\",\"react\",{\"href\":\"/package/react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^16.12.0\"}]]}],[\"$\",\"$L5\",\"react-dom\",{\"href\":\"/package/react-dom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react-dom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^16.12.0\"}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"2c:[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4 lg:col-span-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-wrench h-4 w-4\",\"children\":[[\"$\",\"path\",\"cbrjhi\",{\"d\":\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"}],\"$undefined\"]}],\"Dev Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":20}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"@rollup/plugin-commonjs\",{\"href\":\"/package/%40rollup%2Fplugin-commonjs\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@rollup/plugin-commonjs\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^11.0.1\"}]]}],[\"$\",\"$L5\",\"@rollup/plugin-node-resolve\",{\"href\":\"/package/%40rollup%2Fplugin-node-resolve\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@rollup/plugin-node-resolve\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.0.0\"}]]}],[\"$\",\"$L5\",\"@testing-library/react-hooks\",{\"href\":\"/package/%40testing-library%2Freact-hooks\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[\"$L2e\",\"$undefined\"]}],\"@testing-library/react-hooks\"]}],\"$L2f\"]}],\"$L30\",\"$L31\",\"$L32\",\"$L33\",\"$L34\",\"$L35\",\"$L36\",\"$L37\",\"$L38\",\"$L39\",\"$L3a\",\"$L3b\",\"$L3c\",\"$L3d\",\"$L3e\",\"$L3f\",\"$L40\"]}]}]]}]\n"])</script><script>self.__next_f.push([1,"2e:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n2f:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.0.1\"}]\n30:[\"$\",\"$L5\",\"@types/react\",{\"href\":\"/package/%40types%2Freact\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@types/react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^16.8.22\"}]]}]\n31:[\"$\",\"$L5\",\"@types/react-intl\",{\"href\":\"/package/%40types%2Freact-intl\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@types/react-intl\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.3.18\"}]]}]\n32:[\"$\",\"$L5\",\"@vtex/test-tools\",{\"href\":\"/package/%40vtex%2Ftest-tools\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@vtex/test-tools\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.3.2\"}]]}]\n33:[\"$\",\"$L5\",\"@vtex/tsconfig\",{\"href\":\"/package/%40vtex%2Ftsconfig\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@vtex/tsconfig\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.2.0\"}]]}]\n34:[\"$\",\"$L5\",\"eslint\",{\"href\":\"/package/eslint\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"cla"])</script><script>self.__next_f.push([1,"ssName\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"eslint\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.8.0\"}]]}]\n35:[\"$\",\"$L5\",\"eslint-config-vtex-react\",{\"href\":\"/package/eslint-config-vtex-react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"eslint-config-vtex-react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.1.0\"}]]}]\n36:[\"$\",\"$L5\",\"husky\",{\"href\":\"/package/husky\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"husky\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.2.0\"}]]}]\n37:[\"$\",\"$L5\",\"mutationobserver-shim\",{\"href\":\"/package/mutationobserver-shim\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"mutationobserver-shim\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.3.3\"}]]}]\n38:[\"$\",\"$L5\",\"npm-run-all\",{\"href\":\"/package/npm-run-all\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"npm-run-all\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.1.5\"}]]}]\n39:[\"$\",\"$L5\",\"prettier\",{\"href\":\"/package/prettier\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"wi"])</script><script>self.__next_f.push([1,"dth\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"prettier\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.18.2\"}]]}]\n3a:[\"$\",\"$L5\",\"prop-types\",{\"href\":\"/package/prop-types\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"prop-types\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^15.7.2\"}]]}]\n3b:[\"$\",\"$L5\",\"react\",{\"href\":\"/package/react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^16.12.0\"}]]}]\n3c:[\"$\",\"$L5\",\"react-dom\",{\"href\":\"/package/react-dom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react-dom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^16.12.0\"}]]}]\n3d:[\"$\",\"$L5\",\"rollup\",{\"href\":\"/package/rollup\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"rollup\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.29.0\"}]]}]\n3e:[\"$\",\"$L5\",\"rollup-plugin-terser\",{\"href\":\"/package/rollup-plugin-terser\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\""])</script><script>self.__next_f.push([1,",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"rollup-plugin-terser\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.2.0\"}]]}]\n3f:[\"$\",\"$L5\",\"rollup-plugin-typescript2\",{\"href\":\"/package/rollup-plugin-typescript2\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"rollup-plugin-typescript2\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.25.3\"}]]}]\n40:[\"$\",\"$L5\",\"typescript\",{\"href\":\"/package/typescript\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"typescript\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.7.4\"}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>