
Show HN: React-tater – A React component to add annotations to any element - yosito
https://github.com/localjo/react-tater
======
andygcook
Took me a minute to figure out what the pinning feature does. At first, I
thought it might make the Tater element unmovable but that didn't seem to be
the case. Realized only after revisiting the page that it keeps the comment
open. Obviously up to you, but might want to change the wording on that.

Spudtacular demo by the way.

~~~
yosito
Thanks! I labeled the button "Pin" mostly because of space, but I can see how
that would be unclear. I don't think "Pin Open" would fit, but I'll keep the
idea in mind and see if I can think of a better way of handling it.

------
onion2k
It's a nice idea ... but:

\- The positioning of the 'taters' isn't relative to the element they're
attached to. Put a tater in one of the little circles, then change the width
of the page, and it moves out of the circle. That's limits it usefulness _a
lot_ because it stops users accurately attaching comments to small features.

\- Needing to wrap a component in the <Tater /> component is painful. It'd be
better as an external app that's injected in to the page. If it has to be a
React thing, I'd much rather use a HoC or better still, a hook. I don't want
to have to work out if a bug is in my code or the Tater code. Which leads on
to...

\- Another React project with no tests. This makes me very sad.

~~~
yosito
\- The 'taters' aren't attached to the elements in the background. They're
positioned as a percentage of the parent element.

\- If you don't want a React library, this isn't for you.

\- I do have tests. Run `yarn test`.

~~~
JacksonGariety
> They're positioned as a percentage of the parent element.

Why annotate percentages instead of elements? When you go to add an
annotation, it should highlight the element like chrome dev tools ("select an
element in the page to inspect it"), and then add the annotation to the
::before selector of the selected element. Then you'd have real DOM annotation
software.

EDIT: and you don't have to get rid of the code you have. you should still
position the tater wherever the mouse is clicked, but insert the tater at the
deepest DOM level so that it moves where the elements move.

EDIT 2: you won't be able to use position: absolute; to position the elements.
You'll have to calculate the position by subtracting the element offset from
the position of the mouse at the time of click. It will be sort of tricky to
position the annotations properly, but it's definitely doable.

EDIT 3: you probably want a relatively positioned container around each
annotation, and then use position: absolute; inside of that. The position of
the annotation will be "absolutely" positioned relative to the container, and
then you can just use arithmetic to set the `left` and `top` styles.

EDIT 4: the annotations will interfere with CSS's "nth-child" and similar
selectors. I think there's a way you can leverage the shadow dom to keep the
annotations separate from the user's markup:
[https://developer.mozilla.org/en-
US/docs/Web/Web_Components/...](https://developer.mozilla.org/en-
US/docs/Web/Web_Components/Using_shadow_DOM)

EDIT 5: rendering annotations this way opens the door for all sorts of quick-
win features, like highlighting or listing all the elements that have been
annotated and saving/sharing this as a file.

EDIT 6: this should really just be a script you include in <head />, for the
testing environment only. it's poor design to mix view logic with
testing/feedback.

~~~
schwartzworld
dude just make a pull request

~~~
JacksonGariety
I will

------
_tinymachine
Apart from the Usage section of the readme, there’s no mention of how
annotations are only stored locally, via localStorage, it looks like? Might be
helpful to state that explicitly in the readme and on the demo site. Nifty
tool — thanks for sharing!

~~~
yosito
Yeah, the docs are a little sparse at the moment. I really only intended this
as a demo, and didn't expect to get much attention, so I didn't document
everything. But when I get around to expanding the docs, I'll definitely make
a note about local storage.

------
queercode
Super cool!

Feature idea: having a way of auto-incrementing them would be nice (instead of
having to switch icon to a number).

------
oliverx0
This is awesome! A little buggy but I will try it out in a project I am
working on.

------
adz_6891
Really neat. Nice one!

~~~
yosito
Thanks!

------
extro
Placing a potato resets the css animations. NICE!

~~~
yosito
I'm not sure what you're saying. There shouldn't be any animations. Are you
seeing a bug?

~~~
freddex
I think the top commenter means the animation of the placeholder elements on
your demo page ([https://iamlocaljo.com/graphy-react-
challenge/](https://iamlocaljo.com/graphy-react-challenge/)). It's a pretty
minor glitch.

~~~
yosito
Oh, interesting. I guess that's because React re-renders the child component.
I should think about a way I can prevent it from doing that. Ideas welcome!

