Release 2.0.0

Breaking changes

⚠️ Do not worry, you can put everything back to something strictly equivalent at what was here before.

No more multiple children to ArcherElement

You can no longer use multiple children elements for ArcherElement.

• If you really need multiple children, then you need to wrap them in a <div />. It used to be done like this internally but this was causing drawing issues, so now to achieve the same as before you should now wrap your elements yourself.

If your layout broke, try the following. We used to add an artificial div internally with ArcherElement, which has been removed. A quick fix is to add back the div yourself:

<ArcherElement>
-  <Content />
+  <div>
+    <Content />
+  </div>
</ArcherElement>

No more custom components as direct children of ArcherElement without tweaking

• You can no longer use custom components as a direct child of ArcherElement out of the box. Two fixes possible:
  • wrap it in a div, as mentioned above. Ok if it doesn't break your layout.
  • forward the reference of your component to the DOM element in your component that will act as a drawing reference. See below:

- const MyComponent = (props) => {
+ const MyComponent = React.forwardRef((props, ref) => {
   return (
-    <div>
+    <div ref={ref}>
       <span>fixed</span>
     </div>
   );
- };
+ });

// ...

<ArcherElement><MyComponent /></ArcherElement>

Bugfixes

• Solved an issue with arrows not drawing to the proper element #93
  • This was probably the root of many problems. If you had problems with arrows not drawing properly, try this new release 😉