Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Only: Support "visible" modifier

See original GitHub issue

What:

I propose to support the visible prop on the Only component.

When provided, this prop would tell the Only component to render but hide its children, instead of conditionally rendering them.

Why:

This would allow more control over the rendering behavior, and would solve potential nodes mismatch issues during SSR (#117).

How:

It’s tricky, since I feel that adding this prop to the current component may complicate it too much. Introducing a separate component, or splitting them into different component. Needs discussion.

Issue Analytics

State:
Created 5 years ago
Comments:12 (6 by maintainers)

Top GitHub Comments

1reaction

bittttttencommented, Nov 18, 2019

Personally I wouldn’t mind the jump, as it happens when the viewport width changes so you would expect the layout to change. It wouldn’t jump by itself like an image that took a while to load in or an annoying advert 👻

I use the display: none technique when making my own responsive layouts so that’s why I would go for it 😃

Perhaps you could add a prop for it?

<Visible variant="hide" />
<Visible variant="remove" />

Where hide uses visiblity none, and remove uses display none? The default being remove?

1reaction

kettanaitocommented, Nov 17, 2019

@bitttttten, worry not! Your involvement is highly appreciated, and I’ve started with the implementation that will be a part of #250 (next minor release).

display:none is viable, if you don’t mind the jump. Ideally, it would be nice to specify which of the two behaviors you want: visually hidden, but taking space, or entirely not visible. Since both options concern CSS, it’s quite possible to make the property/value pair parametrized through <Visible> component’s props.

Top Results From Across the Web

Visibility modifiers | Kotlin Documentation

The internal visibility modifier means that the member is visible within the same module. More specifically, a module is a set of Kotlin...

Kotlin Visibility Modifiers - public, protected, internal, private

Visibility Modifiers are modifiers that when appended to a class/interface/property/function in Kotlin, would define where all it is visible and ...

TypeScript Data Modifiers: public, private, protected, static ...

The private access modifier ensures that class members are visible only to that class and are not accessible outside the containing class. Example:...

Visibility Modifiers in Kotlin - Baeldung

Visibility modifiers are used to determine what other elements of code have access to the element being modified. They apply to some different ......

Kotlin basics: visibility modifiers. public, internal , protected ...

The public modifiers means that the declarations are visible everywhere. In Kotlin the default visibility modifier is public while in Java is package-private....