When you need to display chosen components outside the UXPin canvas – at a specific position on the screen, Portal Components will enable that.
For example, notification components (often called “toast” or “snack”) are displayed at the top or the bottom of the screen. Another common pattern in web applications is “modal” (or “dialog”) components that cover the whole screen. To display these types of components correctly, you need to render them in what is called a Portal in the React world.
Use the JSDoc comment “@uxpinuseportal” to enable this behavior in the 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 in the canvas no matter their position on the canvas in the UXPin Editor.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":"Mark components by comment"},"content":{"html":"Component properties are serialized based on the default export of class/function. If the export of a component is not a function/class that exposes its own props but is wrapped by another function, then the serialization is not possible.
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"export default withAppProviderIn the Button component from the example above we cannot serialize properties (and finally can't display the Properties panel). To handle this approach, you have to add a JSDoc comment to handle this component.
A solution to the case above is to add a JSDoc comment @uxpincomponent before the class/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":null},"content":{"html":"You have to add a `@uxpincomponent` comment before the class/function.
"}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":"Namespaced Components"},"content":{"html":"You may use the nested components approach in your library. It means that your component contains another component. Use them as represented below:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"import Autocomplete from '../Autocomplete';\n \nconst textField = (\nThere are 3 levels of components here:
To handle this approach you have to declare the namespace in your component.
To declare the namespace in components, use the JSDoc comment `@uxpinnamespace`, and declare the name of the parent component. Looking back at our example, you need to declare the namespaces in `ComboBox` and `TextField` components like below:
`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":"On our example, the namespace for the `ComboBox` component is `Autocomplete` because it's a direct child of the `Autocomplete` component. And the namespace for the `TextField` component is `Autocomplete.ComboBox` because it’s on the 3rd level from the top component (1st level), and its parent is the `ComboBox`. This is how we support multilevel nesting.
After adding the `@uxpinnamespace` comment, you'll be able to use components in merge presets. You can do this the same way as in your application code.
When you import the Autocomplete component in preset by:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"import Autocomplete from '../Autocomplete';"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"You'll be able to use components to define preset like in your code:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"import Autocomplete from '../Autocomplete';\n \nconst textField = (\nYou can also import the `TextField` component directly like below:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"import TextFiled from '../components/ComboBox/components/TextField';"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"Then you will create a preset like this:
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"import Autocomplete from '../Autocomplete';\nimport TextFiled from '../components/ComboBox/components/TextField';\n \nconst textField = (\nThe components declared in this way can be used in the properties panel as a value in node/element properties:
"}}},{"__typename":"PrismicDocsPageBodyImageWithCaption","slice_type":"image_with_caption","primary":{"image":{"url":"https://images.prismic.io/uxpincommunity/eb1e07dea7d132422c813d106666832381ca8269_props-panel.png?auto=compress,format","Retina__2x_":{"url":"https://images.prismic.io/uxpincommunity/5a53c049976257e3a2a85849315d93969e8fa389_props-panel.png?auto=compress,format"}},"image_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"Namespaced components in the library panel would display with a full namespace name:
"}}},{"__typename":"PrismicDocsPageBodyImageWithCaption","slice_type":"image_with_caption","primary":{"image":{"url":"https://images.prismic.io/uxpincommunity/7478a048d1247c04c1ffe41e3afba047cc35e130_library.png?auto=compress,format","Retina__2x_":{"url":"https://images.prismic.io/uxpincommunity/2cd8eb5c957dc3046ed8917c7a095e70108c39e8_library.png?auto=compress,format"}},"image_description":{"text":null}}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":"Resizing Components"},"content":{"html":"The presentation of code components in UXPin may require adjustments at times. That is especially important for the size of your code components.
Sometimes the bounding box of the code component may be larger than the element itself (skip container).
In other cases, you may want to block the possibility to resize the component (non-resizable). Or you may require to cover 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 can not match the real size of the element. To solve this problem you can point a specific HTML node (by default Merge uses root node of the component).
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"uxpinRef"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"This is a specific property that is passed to the component along with regular props. It must be set to React ref attribute, for example:
"}}},{"__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 and you can mark this component as non-resizable to Merge. Thanks to this action we won’t see transformers to resize component in UXPin editor.
"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"/**\n * @uxpinwrappers\n * NonResizableWrapper\n */\nconst Button = ({greeting='Hello}) => (\nYou can use both of the actions (and more in the future) 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":"Interaction triggered on property change"},"content":{"html":"In many cases, the designer wants to get value from the prototype to update the content of the prototype. It means there needs to be a way to bind, store, and use values between components and UXPin.
`@uxpinbind` allows you to bind the interaction to a specific property of the component.
In the editor, all properties that have a defined binding are available as interaction triggers for the selected code component.
It allows the designer to:
Example of 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 (repository available here), there is a component named `Tabs`. It basically allows creating navigation based on tabs. This component contains other components as children - `Tab`.
As a designer, we may want to create an interaction to present specific content, let's say `Card` based on the selected `Tab`. UXPin won't be able by default to get the value of the selected tab from `Tabs` component. To do it, we'll use `@uxpinbind`
The first step is to check the documentation of the component.
In this example, we'll bind two properties - `onChange` and `value`. The goal is to set an interaction in UXPin that will trigger interaction onChange once the value will be changed.
The next step is to add `@uxpinbind` annotation to the value that will trigger interaction. `@uxpinbind` requires specific information about the parameter to bind the interaction.
For `Tabs` we want to use a value of the property and that's why we use the second parameter of the property `on Change 1`
Once the `@uxpinbind` is defined designer can create an interaction using value as a trigger for the interaction onChange.
"}}},{"__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}}}]}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"categoryUid":"merge","pageUid":"adjusting-components","meta_description":"UXPin's merge Docs, adjusting components for new and advanced users","meta_image":"https://images.prismic.io/uxpincommunity/fa3875f8df8606e6405ba46165becc1ea6ed3d34.png?auto=compress,format","meta_title":"Adjusting Components | Merge","page_title":"Adjusting Components | Merge"}}