NeighborLocation

🚨 NeighborLocation component is deprecated and will be removed in the next releases. Use property neighborLocation specification on components.

We did this because of the unreliability of the API and the unpredictability of neighbor detection, especially in React 18's parallel render.

NeighborLocation is a component for grouping components. It indicates where the component is in relation to its neighbors.

For example, you can group together:

• Button
• Input
• Select

You may also need a flex-box to align the components. For more information, see the Flex-box and indent system.

Buttons can be grouped.

If you group primary buttons, the right one will have a 1px white border.

If you group secondary buttons, the left one will hide it's right border.

Don’t group tertiary buttons this way.

You can group input, select, and button.

By default, <NeighborLocation/> doesn't create an HTML wrapper, but you can pass the component tag you want.

For the correct type mapping in the TC, you must also pass the interface. <NeighborLocation<FlexProps> tag={Flex} w={200}/>

You can apply to your components. You will need to use the component <NeighborLocation.Detect/> and then the neighborLocation prop will come to your component.

You can use the render function or the element will be cloned.