Develop Reference

How to create a badge component for custom components?

I am facing a really nasty issue, I need to create a badge component that it'll be places over a custom component.
This is my first attempt to create something similar in React, with HTML is way easier because you work directly with the DOM.
In this case instead I need to create a badge that will highlight a new component/feature, when you click on it a popup get's open with a bit of text that'll explains what the component is about, aka it's functionality. Telling you this because I need to listen for onClick and it's not possible to use pseudo-elements.
The base idea
<BadgeComponent position="top left">
<CustomComponent />
</BadgeComponent>
Since I can't use a pseudo-element that'll inherit all the element CSS properties this is my thinking:
do not change the CustomComponent because each time could be different
the BadgeComponent is a wrapper that creates a div with position:relative (so I can position the badge wherever I want)
BadgeComponent needs to be display: inline-block otherwise it'll change the overall layout
I need to take the CustomComponent box-model properties, remove from it and apply them to the BadgeComponent. This mostly because margins are messing with the BadgeComponent size and position the badge itself will be trickyer
Basically I need to take the CSS properties of the DOM element rendered from the child component.
The approach
So I've been experimenting with some code before came here and my first attempt has been to dinamically pass a ref to the child component of BadgeComponent with this snippet:
{React.Children.map(this.props.children, (element, idx) => {
if (idx > 0) return; // don't care if it has more childrens, at least for now.
return React.cloneElement(element, { ref: this.newFeature });
})}
I also thought to take the CustomComponent as a prop of BadgeComponent, like so:
<BadgeComponent position="top left" target={ CustomComponent }>
But I didn't (yet) followed this path because I thought that at the end of the day this.props.target it's basically the same of this.props.children and didn't earn anything doing so. Am I right?
I know that in React we have ref to get a reference to the DOM created from a component but in this case is not applicable because I am not applying the ref to the component that renders an HTML, I am applying it to CustomComponent that gets cloned and it doesn't pass to the DOM.
From my experiment everything works fine if I pass an HTML element, in the experimental code I have a div.box that gets the badge in the position that I want but as soon as I pass the Button I got the following error: Window.getComputedStyle: Argument 1 does not implement interface Element.
I am using window.getComputedStyle to get the CSS properties I care about.
My research
I've been looking all around the web and I've seen a nice implementation that, unfortunately, just works with styled components or styled defined inline in <style>. I am looking to not use NPM packages as this one because firstly I believe that it is possible to implement without reach for an additional package and second actually I do not like much the way that the sticky/badge get's implemented (with all respect obviously).
I don't know where to look anymore, I am not an expert JS/React developer (been WP theme developer for 10 years) so probably there is some basic concept that I missunderstand?
I've read about findDOMNode (looks will be deprecated soon) and forwardRef in the React ecosystem but I do not think that's the way to go, am I wrong?
I do not want the copy/paste code, well if you're so gentle to fork the codesandbox and share the solution will be great but I am trying to learn here: there is a way to get a reference of the rendered HTML element from any component?
Thinking that this is the missing part, if I can reach the DOM my code is already working 😊

What's the difference between Vuetify card and sheet?

Vuetify docs define the sheet as follows:
The v-sheet is designed to power other paper components within Vuetify. It is meant to be used as a low level component.
card according to docs is this:
The v-card component is a versatile component that can be used for anything from a panel to a static image.
To me (not JS person) they seem very similar. Are they interchangeable? When to use one but not the other? Can you illustrate with examples?

Your question to me sounds little bit like "What is a difference between html div and section tags?"
Do you get me? I it is semantic thing.
"Low level" components tells me that you can use v-sheet in v-card but you shouldn't do the opposite.
Like putting span in p is ok, but doing the other way is a wrong practice.
Hope that helps you ;-)

VSheet and VCard will look quite similar and is quite similar because like most other component from vuetify VCard is made from the VSheet base.
A good use case for using VSheet is for creating your own custom component. Say you not happy with the look and feel of VCard and you want to create your own variant you would use VSheet as your base.

v-card has slots for title, subtitle, text, and actions.
v-card uses v-sheet and adds these areas.
If you do not need those areas, use v-sheet, as v-card adds extra overhead with extra HTML content and CSS styling.

styled-components and custom styles?

I've been loving checking out styled-components, but getting a bit stuck with the concept of extracting everything out into a component, and how to tweak styles for a particular use case. For example:
<Flex>
<MyStyledTitle>Hello I am a Title</MyStyledTitle>
<MyStyledBodyText>blah</MyStyledBodyText>
</Flex>
Let's say that I wanted to make the following customisations for this use case:
styled title grey (subdued text colour),
the body text to have a right margin of 100px (don't ask why).
The styled-components way, the first part could be done like:
<MyStyledTitle colorTint='subdued' />
or even
<MyStyledTitle>
<SubduedText>MyTitle</SubduedText>
</MyStyledTitle>
Perhaps using a prop for title that lets you configure it to use subdued text or ANOTHER hild component that defines the grey text..
But what about for the second option...
<MyStyledBodyText style={{paddingRight: 100}} />
Inline style? Use a Grid or layout component around it?
At which point does something become a specific styled-component and if not, then how does one customise smaller style changes?
While i really like this idea of removing the mapping between component + class name, I guess i'm feeling a bit torn between the classical idea of having a 'style sheet' file that can contain all the classes and modifier css, then using a presenter to choose between the combinations of css classes.
I might be missing something here, but just keen to see some bigger examples of styled components in practice. Any links / tips would be greatly appreciated!

We've been using styled-components in our project extensively. Few basic patterns/conventions we use are
Components created using StyledComponents are not used across React Components. Under extreme scenarios, we pull them into external files and export.
DIV is the most extensively used styled-component (styled.div). (Ofcourse we do use other html elements like button, table td etc., but styled explicitly).
Different styles for the same HTML element (or) React Component are declared explicitly as different styles. (If you refer to FAQ section of the styled-components docs, you might notice these - https://github.com/styled-components/styled-components/blob/master/docs/faq.md)
Overall to answer your question, we have moved away from the classical stylesheet and as well thinking about combining multiple styles. It has worked well, except that looking up on unit tests is a bit painful.
Thanks

Correct way to hide components in React.js

Say you are passing a prop called show to a component. If the prop value is true, you should render the full component normally. If it is false, you should not display anything.
You can do this two ways.
return null in the render method of the component.
apply a CSS class containing display: none attribute to the component's DOM element.
Which ones is the correct or the preferred way?

I do not think there will be any definite answer for this question.
Each approach has its benefits and drawbacks.
With CSS you have:
it might work faster
no need to think about restoring child control states if control is shown again.
With returning null:
the total rendered DOM might be considerably smaller. This is important if you have many such components that might be hidden.
there will be no collisions in rendered html. Lets say you have tabular view. Each tab is its own complex form with many child controls. If you have some raw javascript/jquery/whatever working with their ids/classnames etc. - its quite hard to ensure each tab/form has unique ids, unless you do not render them.
From my point of view the decision will be based upon the structure of your control. If it have complex structure with many nested children and you do not have any means of restoring their states when switched on again - go with CSS, but I would say this is a short term solution for quite simple controls only. In all other cases I would go with not rendering a component.

If you think you would need to display the component again, during that page life, then I would recommend using css way, as the impact on DOM manipulation would be less in that case. In some other cases probably returning null would be more helpful.

For the most part, your two solutions are interchangeable. They both "work" fine.
I would warn against preemptive optimization in choosing which of these methods to choose. If you do need to eventually modify your code and try the other method, this is an absurdly simple swap to make and shouldn't be an obstacle. So don't worry about it until there's a reason to worry about it.

I'm the OP.
If components are hidden depending on the screen size, CSS media queries and display: none works the best if the app is pre-rendered using something like react-snap. This is because, if the pre-rendered device and the viewing device don't match, the layout would change when the app rehydrates if the component hiding logic is in JS.
Related to that, we need to be careful that even though the component is not "shown" with CSS display: none, the component is still there and if there are effects, they will still fire.

Two dynamic DOM elements and positioning after animations?

So I have table and menus, which I want to place near selected element.
For example, table slides down from one line and there is transition, so I can't instantly take relative offset and set it to menu. I should do it after transition is complete.
So, talking in abstract way, I should emit event about selection of element when table is fully displayed. Or I should display all table and then select element, so menu will know where to go.
The problem is: I dunno how to subscribe on transition end.
Yea, I can recalculate position of menu in $watch, but I don't feel like I need a new watcher here.
How it could be implemented on ReactJS, for example? I use angularjs, but the point is - I don't need to use two-way-binding here.
Any thoughts?
Btw: I can't rely on angular-animate since it requires classes to be used, but I have to play with css dynamic attributes instead. And no, it is not possible to rewrite it to use classes, yes I tried. It will not work by the possibilities of css.