NeatoJSComponents
Fields#
Fields are great for when you have to display any type structure. They can work for API reference, API fields, query paramaters, component props, and much more.
General usage#
Make a field by just making a <Field /> component. You will need to specify its type and it's name, and optionally also if it's a required field.
You can also use the <Field.Properties /> component to group properties on a nested field. See the example below:
<Field title="example.field" type="string" required>
This is an example field.
</Field>
<Field title="example.nestedField" type="object">
This is an example field with nested properties
<Field.Properties>
<Field title="example.nestedField.field" type="string" required>
This is an example nested field.
</Field>
<Field title="example.nestedField.second" type="number">
This is a second example nested field.
</Field>
</Field.Properties>
</Field>example.fieldstringrequired
This is an example field.
example.nestedFieldobject
This is an example field with nested properties
Component API - <Field />#
A field with a type display, great for documenting types or structures.
titlestring
The title of the field.
typestring
The type of the field.
requiredboolean
Mark this field as required.
childrenany
The description of the field, you can use markdown freely in here.
Component API - <Field.Properties />#
A collapsable group of fields, good for showcasing nested objects.
childrenany
The contents of the collapsable section, it's recommended to only put field components in here.
defaultOpenboolean
Boolean indicating if it should be opened by default.
textstring | { show: string, hide: string }
The text that shows when you need to show or hide the contents of the collapsable section.
{/* will show up with "Toggle properties" for both when it needs to be hidden or when it needs to be shown */}
<Field.Properties text="Toggle properties">
Contents
</Field.Properties>
{/* will show up with "Show object" for when it needs to be shown, and "Hide object" when it needs to be hidden */}
<Field.Properties text={{ show: "Show object", hide: "Hide object" }}>
Contents
</Field.Properties>