Semantic-ui-react: How to conditional hide/show an element/component ?

Created on 13 Oct 2016 · 3Comments · Source: Semantic-Org/Semantic-UI-React

Hi !

I can't find a way in the doc to hide or show an element (Grid, Segment, Input...) with an argument.

Like :
<Segment hide={true}> Hidden Segment </Segment>

Is it possible ? If not, why ?
Thanks !

question

Source

GautierT

👍2

Most helpful comment

Hey @GautierT thanks for the question! This sounds like core SUI feature request and we only handle generating valid SUI markup. Adding styles is beyond our scope here.

That being said, I think the "React way" of handling this would be something like:

const SomeComponent = (props) => {
  return props.isSegmentVisible && <Segment />
}

// Or for more complex components, an early return could be more clear.
const SomeComponent = (props) => {
  if (!props.isSegmentVisible) return null

  return <Segment />
}

_Edit_ Adding display:none does the same as the above as far as React is concerned. When it reconciles the virtual DOM with the real DOM it won't bother rendering components that would not be visible (e.g. in the display:none case).

jeffcarbs on 13 Oct 2016

👍3

All 3 comments

Hey @GautierT thanks for the question! This sounds like core SUI feature request and we only handle generating valid SUI markup. Adding styles is beyond our scope here.

That being said, I think the "React way" of handling this would be something like:

const SomeComponent = (props) => {
  return props.isSegmentVisible && <Segment />
}

// Or for more complex components, an early return could be more clear.
const SomeComponent = (props) => {
  if (!props.isSegmentVisible) return null

  return <Segment />
}

jeffcarbs on 13 Oct 2016

👍3

Thanks @jcarbo. I'm coming from Angular world and i haven't thought about the React way... Thanks !

GautierT on 18 Oct 2016

👍2

Very very very difficult....

I Would like hide this on my code when loadDatabase function. But, i confess it maybe not possible with semantic ui.

            <Segment style={{ height: '100px' }}>
                <Dimmer active>
                    <Loader content='Carregando...' />
                </Dimmer>
            </Segment>