Sometimes Merge needs a hint from your code to display a component correctly in UXPin. You give these hints with JSDoc comments that start with @uxpin, placed right before the component or property. This page covers the cases where you need them:
"}}},{"__typename":"PrismicDocsPageBodyTable","slice_type":"table","primary":{"table_first_title":{"text":"Tag"},"table_second_title":{"text":"What it does"}},"items":[{"col1":{"html":"@uxpinuseportal
"},"col2":{"html":"Renders the component in a portal, so toasts and modals appear where they should in Preview.
"}},{"col1":{"html":"@uxpincomponent
"},"col2":{"html":"Tells Merge which component to read when the default export is wrapped by another function.
"}},{"col1":{"html":"@uxpinnamespace
"},"col2":{"html":"Declares the parent of a nested component, such as Autocomplete.ComboBox.
"}},{"col1":{"html":"@uxpinwrappers
"},"col2":{"html":"Adjusts how the bounding box behaves: SkipContainerWrapper and NonResizableWrapper.
"}},{"col1":{"html":"@uxpinbind
"},"col2":{"html":"Lets the designer trigger an interaction when a property changes.
"}}]},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":""},"content":{"html":"When you need to display chosen components outside the UXPin canvas, at a specific position on the screen, portal components enable that.
For example, notification components (often called “toast” or “snack”) appear at the top or the bottom of the screen. Another common pattern is a “modal” (or “dialog”) that covers the whole screen. To display them correctly, render them in a portal, as in React.
Use the JSDoc comment @uxpinuseportal to enable this behavior in UXPin Preview mode:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"/**\n * @uxpinuseportal\n */\nfunction Dialog(props) {\n}"}]},"language":null}},{"__typename":"PrismicDocsPageBodyTip","slice_type":"tip","primary":{"tip_type":"Info tip","tip_title":null,"tip":{"html":"Portal components can be dropped anywhere on the canvas, no matter their position in the UXPin Editor.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":""},"content":{"html":"Merge reads component properties from the default export of a class or function. If the export is not a function or class that exposes its own props, but is wrapped by another function, Merge can’t read the properties. In that case it also can’t display the Properties panel.
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"export default withAppProviderTo solve this, add the JSDoc comment @uxpincomponent before the class or function that declares the component:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"/**\n * @uxpincomponent\n */\nexport class Button extends React.PureComponent {\n // ...\n}"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":""},"content":{"html":"You can use nested components in your library. It means a component contains another component, as in this example:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"import Autocomplete from '../Autocomplete';\n \nconst textField = (\nThere are 3 levels of components here: the top-level Autocomplete, the second-level ComboBox and the third-level TextField. To handle this, declare the namespace in your components.
Use the JSDoc comment @uxpinnamespace and declare the name of the parent component. In our example, declare the namespaces in the ComboBox and TextField components:
ComboBox.jsx
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"/**\n * @uxpinnamespace Autocomplete\n */\nexport class ComboBox extends React.PureComponent {\n // ...\n}"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"TextField.jsx
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"/**\n * @uxpinnamespace Autocomplete.ComboBox\n */\nexport class TextField extends React.PureComponent {\n // ...\n}"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"The namespace for ComboBox is Autocomplete, because it’s a direct child of Autocomplete. The namespace for TextField is Autocomplete.ComboBox, because it’s on the third level from the top and its parent is ComboBox. This is how Merge supports multilevel nesting.
After adding @uxpinnamespace, you can use the components in presets the same way as in your application code. Import the top-level component and use the nested ones through it, as in the example above. You can also import TextField directly:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"import Autocomplete from '../Autocomplete';\nimport TextField from '../components/ComboBox/components/TextField';\n\nconst textField = (\nComponents declared this way can be used in the Properties panel as a value of node or element properties.
"}}},{"__typename":"PrismicDocsPageBodyImageWithCaption","slice_type":"image_with_caption","primary":{"image":{"url":"https://images.prismic.io/uxpincommunity%2F55c99856-f8d6-45fe-b7bf-c4494ab18a95_props-panel.png?w=752&h=1766?auto=compress,format","Retina__2x_":{"url":"https://prismic-io.s3.amazonaws.com/uxpincommunity%2F55c99856-f8d6-45fe-b7bf-c4494ab18a95_props-panel.png?w=1504&h=3532"}},"image_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"Namespaced components in the library panel display with their full namespace name.
"}}},{"__typename":"PrismicDocsPageBodyImageWithCaption","slice_type":"image_with_caption","primary":{"image":{"url":"https://images.prismic.io/uxpincommunity%2F178a4166-dcc1-442f-af71-e35fbb20d5d6_library.png?w=752&h=554?auto=compress,format","Retina__2x_":{"url":"https://prismic-io.s3.amazonaws.com/uxpincommunity%2F178a4166-dcc1-442f-af71-e35fbb20d5d6_library.png?w=1504&h=1108"}},"image_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":""},"content":{"html":"The presentation of code components in UXPin may need adjusting, especially their size. Sometimes the bounding box of a code component is larger than the element itself (skip container). In other cases, you want to block resizing (non-resizable). Or you need both at the same time.
"}}},{"__typename":"PrismicDocsPageBodyVideo","slice_type":"video","primary":{"video_link":{"url":"https://uxpincommunity.cdn.prismic.io/uxpincommunity%2F16ecec01-3093-4a3b-ba50-ff85f49328ca_wrapper.mp4"},"video_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":""},"content":{"html":"In some cases the bounding box of the code component in UXPin doesn’t match the real size of the element. To solve this, point Merge at a specific HTML node. By default Merge uses the root node of the component. Pass the uxpinRef property, which Merge sends to the component along with the regular props, to the React ref attribute:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"/**\n * @uxpinwrappers\n * SkipContainerWrapper\n */\nconst Button = ({ greeting = 'Hello', uxpinRef }) => (\nSome code components aren’t resizable. Mark such a component as non-resizable, and the resize handles won’t appear in the UXPin Editor.
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"/**\n * @uxpinwrappers\n * NonResizableWrapper\n */\nconst Button = ({ greeting = 'Hello' }) => (\nYou can use both actions for the same component:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"/**\n * @uxpinwrappers\n * SkipContainerWrapper, NonResizableWrapper\n */"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":""},"content":{"html":"In many cases, the designer wants to use a value from the prototype to update its content. So there has to be a way to bind, store and use values between components and UXPin.
@uxpinbind binds an interaction to a specific property of the component. In the Editor, every property with a defined binding is available as an interaction trigger for the selected code component. It allows the designer to:
Example of a bound interaction:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"Checkbox.propTypes = {\n onChange: PropTypes.func,\n /**\n * @uxpinbind onChange 0.target.checked\n */\n isChecked: PropTypes.bool,\n};"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"In Material UI there’s a component named Tabs, which creates navigation based on tabs. It contains other components as children: Tab. A designer may want to show specific content, say a Card, based on the selected Tab. By default UXPin can’t get the value of the selected tab from Tabs, so you use @uxpinbind.
First, check the component’s documentation. Here you bind two properties: onChange and value. The goal is an interaction in UXPin that triggers on onChange once the value changes. Next, add the @uxpinbind annotation to the property that triggers the interaction. It needs the parameter to bind. For Tabs you want the value of the property, so use the second parameter of onChange:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"Tabs.propTypes = {\n onChange: PropTypes.func,\n /**\n * @uxpinbind onChange 1\n */\n value: PropTypes.any,\n};"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyVideo","slice_type":"video","primary":{"video_link":{"url":"https://uxpincommunity.cdn.prismic.io/uxpincommunity/4351a33c-d5c4-45a7-986f-4175c74ab79d_add_bind.mp4"},"video_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"Once @uxpinbind is defined, the designer can create an interaction that uses the value as a trigger for the onChange interaction.
"}}},{"__typename":"PrismicDocsPageBodyVideo","slice_type":"video","primary":{"video_link":{"url":"https://uxpincommunity.cdn.prismic.io/uxpincommunity/5aa0c407-054f-473a-852b-e5284984e292_bind.mp4"},"video_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":"Configuring the Properties Panel"},"content":{"html":"When a React component is integrated with UXPin using Merge, Merge reads all its properties with their names from the code. As a result, the Properties panel can be hard to read and show many properties that a designer doesn’t need. You can clean it up with JSDoc comments in your code. Hide properties, give them friendlier names and descriptions, and choose the right control for each.
"}}},{"__typename":"PrismicDocsPageBodyTable","slice_type":"table","primary":{"table_first_title":{"text":"Tag"},"table_second_title":{"text":"What it does"}},"items":[{"col1":{"html":"@uxpinignoreprop
"},"col2":{"html":"Hides a property from the Properties panel.
"}},{"col1":{"html":"@uxpinpropname
"},"col2":{"html":"Shows an alternative name for a property.
"}},{"col1":{"html":"@uxpindescription
"},"col2":{"html":"Shows an alternative description for a property, or a description of the component.
"}},{"col1":{"html":"@uxpincontroltype
"},"col2":{"html":"Changes the control used to edit a property.
"}},{"col1":{"html":"@uxpindocurl
"},"col2":{"html":"Adds a link to the component’s documentation.
"}}]},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":""},"content":{"html":"You can exclude a property from the Properties panel, so it won’t be visible in the controls mode. Use the @uxpinignoreprop comment before the property you want 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};"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"Thanks to this comment, onSeriesMouseOver isn’t displayed in the Properties panel in either mode, controls or code.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":""},"content":{"html":"Sometimes a property has a very technical name. You can set an alternative name that displays in the controls mode of the Properties panel. Use the @uxpinpropname comment before the property:
"}}},{"__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};"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyImageWithCaption","slice_type":"image_with_caption","primary":{"image":{"url":"https://images.prismic.io/uxpincommunity%2Fac8a777e-0b1f-451a-8dbf-268c35237b26_screenshot+2019-06-17+15.52.31.png?w=752&h=610?auto=compress,format","Retina__2x_":{"url":"https://prismic-io.s3.amazonaws.com/uxpincommunity%2Fac8a777e-0b1f-451a-8dbf-268c35237b26_screenshot+2019-06-17+15.52.31.png?w=1504&h=1219"}},"image_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":""},"content":{"html":"You can also overwrite a property description to make it more user friendly. Set an alternative description for the property in the controls mode of the Properties panel with the @uxpindescription comment before the property:
"}}},{"__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};"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyImageWithCaption","slice_type":"image_with_caption","primary":{"image":{"url":"https://images.prismic.io/uxpincommunity%2Fd1e84c2a-5b74-41d2-8e1a-8f7125d73a31_screen-crop.png?rect=0%2C0%2C924%2C606&w=752&h=493?auto=compress,format","Retina__2x_":{"url":"https://prismic-io.s3.amazonaws.com/uxpincommunity%2Fd1e84c2a-5b74-41d2-8e1a-8f7125d73a31_screen-crop.png?w=1504&h=985"}},"image_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":""},"content":{"html":"You can also describe the whole component. Use @uxpindescription and @uxpindocurl in the comment before the component:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"/**\n * @uxpindescription A button that triggers an action.\n * @uxpindocurl https://example.com/docs/button\n */\nfunction Button(props) {\n // ...\n}"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"The component description, including the library and branch name, is visible in the Properties panel, together with the documentation link.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":""},"content":{"html":"UXPin offers controls to handle a component’s properties. They are displayed in the Properties panel.
"}}},{"__typename":"PrismicDocsPageBodyTable","slice_type":"table","primary":{"table_first_title":{"text":"Control"},"table_second_title":{"text":"What it displays"}},"items":[{"col1":{"html":"codeeditor
"},"col2":{"html":"The code editor.
"}},{"col1":{"html":"input
"},"col2":{"html":"A single-line input.
"}},{"col1":{"html":"interactions
"},"col2":{"html":"A button to add a new interaction, or a list of interactions.
"}},{"col1":{"html":"number
"},"col2":{"html":"A short input that accepts only numbers.
"}},{"col1":{"html":"select
"},"col2":{"html":"A select list with options.
"}},{"col1":{"html":"switcher
"},"col2":{"html":"A checkbox.
"}},{"col1":{"html":"textfield(x)
"},"col2":{"html":"A textarea with multiple lines, where x is the line count. You don’t have to pass x: the control has 3 rows by default.
"}},{"col1":{"html":"color
"},"col2":{"html":"A color picker.
"}},{"col1":{"html":"image
"},"col2":{"html":"An upload button for selecting an image from your device and an input for an image URL.
"}},{"col1":{"html":"css
"},"col2":{"html":"Controls for adjusting a component’s visual styling through CSS properties.
"}},{"col1":{"html":"materialicons
"},"col2":{"html":"A control for Material icons.
"}},{"col1":{"html":"tailwindclassname()
"},"col2":{"html":"A control for Tailwind class names.
"}},{"col1":{"html":"returningfunction()
"},"col2":{"html":"A control for properties that are functions returning a value.
"}}]},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"Each property type has a specific default control:
"}}},{"__typename":"PrismicDocsPageBodyTable","slice_type":"table","primary":{"table_first_title":{"text":"Property type"},"table_second_title":{"text":"Default control"}},"items":[{"col1":{"html":"Boolean
"},"col2":{"html":"switcher
"}},{"col1":{"html":"Children
"},"col2":{"html":"textfield(4)
"}},{"col1":{"html":"Node or element
"},"col2":{"html":"textfield(3)
"}},{"col1":{"html":"Text
"},"col2":{"html":"input
"}},{"col1":{"html":"Number
"},"col2":{"html":"number
"}},{"col1":{"html":"oneOf
"},"col2":{"html":"select
"}},{"col1":{"html":"Array, shape
"},"col2":{"html":"codeeditor
"}},{"col1":{"html":"Function
"},"col2":{"html":"interactions
"}}]},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"Sometimes the default control doesn’t fit the property, or the usability is poor. Use the @uxpincontroltype comment where you declare the property to change its control. If the control type matches the property type, the new control is 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};"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyImageWithCaption","slice_type":"image_with_caption","primary":{"image":{"url":"https://images.prismic.io/uxpincommunity%2F83f189f7-c4c3-4d61-b3a0-c67907cf4e20_declare+property+control+type.png?w=752&h=316?auto=compress,format","Retina__2x_":{"url":"https://prismic-io.s3.amazonaws.com/uxpincommunity%2F83f189f7-c4c3-4d61-b3a0-c67907cf4e20_declare+property+control+type.png?w=1504&h=633"}},"image_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":""},"content":{"html":"With JSDoc annotations you can make the Properties panel cleaner and more designer-friendly: hide properties that only developers need, rename others and make controls more usable. Here’s an excerpt from a Select component. Without annotations, the panel would show a long list of properties, most of them unnecessary. With the annotations, only the ones the designer needs are shown:
"}}},{"__typename":"PrismicDocsPageBodyImageWithCaption","slice_type":"image_with_caption","primary":{"image":{"url":"https://images.prismic.io/uxpincommunity%2F7c4bdd95-c16e-4f86-89ab-0874d8e635da_example-1.png?w=752&h=844?auto=compress,format","Retina__2x_":{"url":"https://prismic-io.s3.amazonaws.com/uxpincommunity%2F7c4bdd95-c16e-4f86-89ab-0874d8e635da_example-1.png?w=1504&h=1689"}},"image_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyImageWithCaption","slice_type":"image_with_caption","primary":{"image":{"url":"https://images.prismic.io/uxpincommunity%2F44e793fb-3c0e-4387-b10a-46198b9c038d_example-2.png?w=752&h=608?auto=compress,format","Retina__2x_":{"url":"https://prismic-io.s3.amazonaws.com/uxpincommunity%2F44e793fb-3c0e-4387-b10a-46198b9c038d_example-2.png?w=1504&h=1215"}},"image_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"/**\n * Open the Select upon initialization. Primarily for use with uncontrolled components.\n * @uxpinignoreprop\n */\ndefaultIsOpen?: boolean,\n/** Disables the control */\ndisabled?: boolean,\n/**\n * Determines whether the Select is open. For use with controlled components.\n * @uxpinpropname opened\n * @uxpindescription Open options list\n */\nisOpen?: boolean,\n/** Text displayed when there is no item selected */\nplaceholder?: string,\n/** Available sizes */\nsize?: 'small' | 'medium' | 'large' | 'jumbo',"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":"Authoring and Managing JSX Presets"},"content":{"html":"A preset tells Merge how to render a component the first time. Merge needs to know which combination of properties, including children, should be displayed by default. That composition appears whenever you, or anyone on your team, drag and drop the component onto the canvas in the UXPin Editor. A preset is a JSX file stored with the component.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":""},"content":{"html":"Store presets in a presets subdirectory of the component’s directory, as you can see in the boilerplate repository. A preset file name is a number, a dash and a name, such as 0-default.jsx.
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"src/components/Button/\n Button.jsx\n presets/\n 0-default.jsx"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":""},"content":{"html":"A typical preset looks like this:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"import React from 'react';\nimport Button from '../Button';\nimport Icon from '../../Icon/Icon';\n\nexport default (\nAt the top of the file, import React and all the components you want to represent in the preset. In export default(), place the JSX that represents the default composition of your component. Every component in the JSX, apart from its usual properties, must have a unique UXPin ID attribute, uxpId. The uxpId lets Merge render every component properly and track overrides of components.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":""},"content":{"html":"Presets can represent complex, nested structures of components. All uxpId attributes must hold unique values: in one preset, two components can’t have the same uxpId. Beyond that, creating presets for nested structures works like composing JSX in React components. Import all the components and create the full structure in the export default() directive:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"import React from 'react';\nimport SelectItem from '../../SelectItem/SelectItem';\nimport Select from '../Select';\n\nexport default (\n \n);"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"When you choose a uxpId, think about the role the component plays. If you later replace one nested component with another, say a Button is deprecated and replaced with ButtonNew, keeping the same uxpId lets Merge automatically update all designs with the new component.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":""},"content":{"html":"A component can have more than one preset. Add more files to the presets directory. The number sets the order, and the part after the dash is the preset name:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"presets/\n 0-default.jsx\n 1-secondary.jsx"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":""},"content":{"html":"Instead of the presets directory, you can put one preset in a file named after the component in a uxpin-presets directory, for example uxpin-presets/Button.jsx. If that file exists, Merge uses it.
To create preset files automatically, run npx uxpin-merge generate-presets. It reads your config file and generates a preset file for each component. Add --component-path <path> to generate one for a single component.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":""},"content":{"html":"A change in a preset’s code is automatically reflected in the design systems library in the UXPin Editor. Merge modifies all properties, unless a user changed a property of a given component in the UXPin Editor. Such a change is treated as an override and stays intact. Take this example.
"}}},{"__typename":"PrismicDocsPageBodyVideo","slice_type":"video","primary":{"video_link":{"url":"https://uxpincommunity.cdn.prismic.io/uxpincommunity%2F5e8714e6-881b-4e02-b89a-eac64f19519b_merge_button_comparison.mp4"},"video_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"At first, the default preset for a button looked like this:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"import React from 'react';\nimport Button from '../Button';\n\nexport default (\nA user dragged this element to the canvas in UXPin and, in the Editor, changed the property size to large and the color to secondary. Then, say by the decision of the design systems team, the default preset for Button was modified to:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"import React from 'react';\nimport Button from '../Button';\n\nexport default (\nWhat happened to the design the user created in the UXPin Editor with this React button? Nothing. The properties that were changed had been overridden by the user, and Merge preserved those changes to keep the design intact.
Now say the default label changed as well. The user hasn’t overridden this property. Merge updates the user’s project:
"}}},{"__typename":"PrismicDocsPageBodyVideo","slice_type":"video","primary":{"video_link":{"url":"https://images.prismic.io/uxpincommunity%2Fb3f17202-9694-4d0a-b318-bc0125de4637_merge_label_update.gif?auto=compress,format"},"video_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"Merge always compares changes in the code of JSX presets with the implementation, to determine whether the user’s design needs an update.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":""},"content":{"html":"The content of all properties in JSX presets must be serializable as JSON. You can write custom functions and manipulate data in the preset file, but the end result must be serializable. JSX passed in object and array properties is also supported.
This JSX preset is valid:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"import React from 'react';\nimport Button from '../Button';\n\nconst customFunction = () => 'HelloWorld';\n\nexport default (\n \n);"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"This one is incorrect, because passing a function through props is currently unsupported:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"import React from 'react';\nimport Button from '../Button';\n\nconst customFunction = () => 'HelloWorld';\n\nexport default (\n \n);"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"In preset files you can import and modify data sets used by your component:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"import React from 'react';\nimport Table from '../Table';\n\nconst tableData = {\n header: ['band', 'singer', 'lead guitar'],\n body: [\n { band: 'metallica', singer: 'james hetfield', 'lead guitar': 'kirk hammet' },\n { band: 'queen', singer: 'freddy mercury', 'lead guitar': 'brian may' },\n ],\n};\n\nexport defaultThis is a valid JSX preset. You can also import the data from an external JS or JSON file.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":""},"content":{"html":"Merge presets are powerful, and with that power comes responsibility. Remember that changes in a preset update designs, unless the properties were overridden in a particular project in UXPin.
"}}}]}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"categoryUid":"merge","pageUid":"for-developers","meta_description":"UXPin's merge Docs, for developers for new and advanced users","meta_image":"https://images.prismic.io/uxpincommunity/fa3875f8df8606e6405ba46165becc1ea6ed3d34.png?auto=compress,format","meta_title":"For Developers | Merge","page_title":"For Developers | Merge"}}