How to use ref for component

Let’s say I use theme and I want to ref on SideBar like this

<SideBar ref={(el) => this.SideBar = el}>...</SideBar>

but this cannot be achieve. How to get ref for such component

[GregoryPotdevin]

@joemcelroy You can’t really do that as the SideBar has some filters as children, and hiding it would remove the children and the corresponding accessors. That could have unexpected results when running a new query and then showing the sidebar

What you do want, though, is to have all the prebuilt components that work like plain “div” elements with custom presets.

This is your current LayoutBuilder :

export const LayoutBuilder = (className)=> {
  return (props)=> (
      <div className={mixClasses(className, props.className)}>
        {props.children}
      </div>
  )
}

It doesn’t allow adding style or other attributes. What would be better is something like

export const LayoutBuilder = (baseClassName)=> {
  return ({className, children, ...props})=> (
      <div className={mixClasses(baseClassName, className) {...props}}>
        {props.children}
      </div>
  )
}

With something like this (untested) all the extra props get transfered to the div. So now you can add a ref or style={{display: 'none'}} (I wouldn’t recommend using the ref for that, it’s always better to stay in the React world)

[infacq]

So I have to produce extra div?