When a React component is integrated with UXPin using Merge, all its properties are serialized with their names from the code. And because of this, the component's properties panel can often be illegible and display too many properties that are redundant for the designer.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":"Excluding Properties"},"content":{"html":"A specific property can be excluded from the properties panel and, therefore, will not be visible in the controls mode. You can use the `@uxpinignoreprop` comment before the property you would like to exclude.
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"BarChart.propTypes = {\n width: PropTypes.number,\n height: PropTypes.number,\n /** @uxpinignoreprop */\n onSeriesMouseOver: PropTypes.func,\n}\n"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"Thanks to this comment property, `onSeriesMouseOver` will not be displayed in the properties panel in both modes – controls and code.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":"Alternative Names"},"content":{"html":"Sometimes a property has a very technical name You can set an alternative name that will display in the properties panel's controls mode. To set it, use the `@uxpinpropname` comment before the property you would like to change.
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"Button.propTypes = {\n /**\n * Icon that goes after the children\n * @uxpinpropname right icon\n * */\n iconEnd: PropTypes.element,\n /**\n * Icon that goes before the children\n * @uxpinpropname left icon\n * */\n iconStart?: PropTypes.element,\n}\n"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyImageWithCaption","slice_type":"image_with_caption","primary":{"image":{"url":"https://images.prismic.io/uxpincommunity/eef581e503cac5859eace6cfe69ee7afaad3427d_screenshot-2019-06-17-15.52.31.png?auto=compress,format","Retina__2x_":{"url":"https://images.prismic.io/uxpincommunity/26b5a3319bb9aea4186e0a78f548c0727db97bf4_screenshot-2019-06-17-15.52.31.png?auto=compress,format"}},"image_description":{"text":"The original name is still visible in the properties panel's code mode."}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":"Alternative Descriptions"},"content":{"html":"You can also overwrite the component description to make it more user friendly. To change this, you can set an alternative description for the property in the properties panel's controls mode by inserting a comment `@uxpindescription` before declaring the property type.
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"BarChart.propTypes = {\n /**\n * Width of the Chart in px. Accepts only numbers.\n * @uxpindescription width of the chart\n * */\n width: PropTypes.number,\n /**\n * Height of the Chart in px. Accepts only numbers.\n * @uxpindescription height of the chart\n * */\n height: PropTypes.number,\n}\n"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyImageWithCaption","slice_type":"image_with_caption","primary":{"image":{"url":"https://images.prismic.io/uxpincommunity/ef883a5de844153fb32df5898a87069064b937e9_screen-crop.png?auto=compress,format","Retina__2x_":{"url":"https://images.prismic.io/uxpincommunity/957cfe33f67df884306373762ae35f544e0e7c75_screen-crop.png?auto=compress,format"}},"image_description":{"text":"The original description is still visible in the properties panel's code mode."}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":"Control Types"},"content":{"html":"UXPin offers controls to handle the component’s properties. These controls are displayed in the properties panel.
Each property type has a specific default control:
Sometimes the default property does not fit the property or, as in this specific case, the usability is poor, so by using the comment `@uxpincontroltype` in a place where you declare properties you can change control type for this property. If the control type matches the property type, the new control will be displayed in the properties panel.
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"Link.propTypes = {\n /**\n * Content of the Link\n * @uxpinpropname label\n * @uxpincontroltype input\n * */\n children: PropTypes.Node,\n /**\n * A URL or URL fragment to which the Link points\n * @uxpinpropname url\n * @uxpincontroltype textfield(2)\n * */\n href: PropTypes.string,\n /** Available variants */\n variant: PropTypes.oneOf(['danger', 'success', 'warning']);\n};\n"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyImageWithCaption","slice_type":"image_with_caption","primary":{"image":{"url":"https://images.prismic.io/uxpincommunity/b2552b1efd371b25335a2c3c38d673987828249c_declare-property-control-type.png?auto=compress,format","Retina__2x_":{"url":"https://images.prismic.io/uxpincommunity/f220b81b03e6e661aad69e685d65230aa9cb326f_declare-property-control-type.png?auto=compress,format"}},"image_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"By means of JSDoc annotations you can modify the properties panel to make it cleaner and more designer-friendly, such as hide unnecessary properties (needed only for developers), rename other properties, and make controls more usable. Let’s take a look at the example below:
"}}},{"__typename":"PrismicDocsPageBodyImageWithCaption","slice_type":"image_with_caption","primary":{"image":{"url":"https://images.prismic.io/uxpincommunity/bff827243fe28b953dd6c0ac3455507a611135fc_example-1.png?auto=compress,format","Retina__2x_":{"url":"https://images.prismic.io/uxpincommunity/4671c2164b75266e8e408280a9435b70a550d3ca_example-1.png?auto=compress,format"}},"image_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"The selected component shows a long list of properties most of which are not necessary. Using JSDoc annotations, you define which properties you want to be displayed.
"}}},{"__typename":"PrismicDocsPageBodyImageWithCaption","slice_type":"image_with_caption","primary":{"image":{"url":"https://images.prismic.io/uxpincommunity/5fb01d6302f26057574ac0ec9067ba30256fe861_example-2.png?auto=compress,format","Retina__2x_":{"url":"https://images.prismic.io/uxpincommunity/1b438ebce6d422689ef9e347c01bfad80c913205_example-2.png?auto=compress,format"}},"image_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"Below are the details of the component properties declaration:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"/**\n * Open the Select upon initialization. Primarily for use with uncontrolled\n * components.\n * @uxpinignoreprop\n */\n defaultIsOpen?: boolean,\n /**\n * Item selected\n * upon initialization. Primarily for use with uncontrolled\n * components.\n * @uxpinignoreprop\n */\n defaultSelectedItem?: Item,\n /** Disables the control */\n disabled?: boolean,\n /** Index of the highlighted item. For use with controlled components.\n * @uxpinignoreprop\n * */\n highlightedIndex?: number,\n /** Id of the Select\n * @uxpinignoreprop\n * */\n id?: string,\n /** Indicates that the value of the element is invalid\n * @uxpinignoreprop\n * */\n invalid?: boolean,\n /** Determines whether the Select is open. For use with controlled components.\n * @uxpinpropname opened\n * @uxpindescription Open options list\n * */\n isOpen?: boolean,\n /**\n * Provides custom rendering control for the items. See the\n * [custom item example](/components/select#custom-item) and\n * our [render props guide](/render-props).\n * @uxpinignoreprop\n */\n item?: RenderFn,\n /**\n * Specifies a key in the item data that gives an item its unique identity. See\n * the [React docs](https://reactjs.org/docs/lists-and-keys.html#keys).\n * @uxpinignoreprop\n */\n itemKey?: string,\n /**\n * Provides custom rendering control for the menu. See the\n * [custom menu example](/components/select#custom-menu) and\n * our [render props guide](/render-props).\n * @uxpinignoreprop\n */\n menu?: RenderFn,\n /**\n * Plugins that are used to alter behavior. See\n * [PopperJS docs](https://popper.js.org/popper-documentation.html#modifiers)\n * for options.\n * @uxpinignoreprop\n */\n modifiers?: Object,\n /** Name of the field when submitted in a form\n * @uxpinignoreprop\n * */\n name?: string,\n /**\n * Called when an item is selected and it is different than the previously\n * selected item.\n */\n onChange?: (item: Item, event: SyntheticEvent<>) => void,\n /** Called when Select is closed */\n onClose?: (event: SyntheticEvent<>) => void,\n /** Called when Select is opened */\n onOpen?: (event: SyntheticEvent<>) => void,\n /** Called when an item is selected */\n onSelect?: (item: Item, event: SyntheticEvent<>) => void,\n /** Text displayed when there is no item selected */\n placeholder?: string,\n /** Placement of the Select menu */\n placement?: 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start',\n /** Indicates that the user cannot modify the value of the control */\n readOnly?: boolean,\n /** Indicates that the user must select a value before submitting a form */\n required?: boolean,\n /** The selected item. For use with controlled components.\n * @uxpinignoreprop\n * */\n selectedItem?: Item,\n /** Available sizes */\n size?: 'small' | 'medium' | 'large' | 'jumbo',\n /**\n * Provides custom rendering control for the trigger. See the\n * [custom trigger example](/components/select#custom-trigger) and\n * our [render props guide](/render-props).\n * @uxpinignoreprop\n */\n trigger?: RenderFn,\n /** Ref for the trigger\n * @uxpinignoreprop\n * */\n triggerRef?: (node: ?React$Component<*, *>) => void,\n /**\n * Use a Portal to render the Select menu to the body rather than as a sibling\n * to the trigger\n * @uxpinignoreprop\n */\n usePortal?: boolean,\n /** Available variants */\n variant?: 'danger' | 'success' | 'warning'\n};\n"}]},"language":"JavaScript"}}]}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"categoryUid":"merge","pageUid":"configuring-the-properties-panel","meta_description":"UXPin's merge Docs, configuring the properties panel for new and advanced users","meta_image":"https://images.prismic.io/uxpincommunity/fa3875f8df8606e6405ba46165becc1ea6ed3d34.png?auto=compress,format","meta_title":"Configuring the Properties Panel | Merge","page_title":"Configuring the Properties Panel | Merge"}}