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.

Reusable Components: Panel

See original GitHub issue


We need a Panel component that we can use anywhere in our application. It should be able to accept a title, content and components in the footer.

const classes = {
  root: styles.classNameForRootElement,
  title: styles.classForTheTitle,
  close: styles.classForTheCloseButton,
  body: styles.classForTheBodyContainer,
  footer: 'custom-class-for-the-footer-container',

<Panel closable={false} onClose={onClose} classes={classes} modal={true}>
  <Panel.Header>Some title here</Panel.Header>
    <img src="something.png" />
       <p>We should be able to add anything as the content<.p>
    <CustomFooterComponent />

If the modal property is set to false, the panel should render in place. For example in a sidebar or anywhere else.


  • title A string with for the main title (Optional)
  • closable If true the panel should display a close icon at the top, defaults to false (Optional)
  • onClose A callback when use clicks the close icon (Optional)
  • modal If true it shows the panel like a modal window, defaults to false
  • classes An object with custom classes to apply to the inner elements of the panel (Optional)



The Panel component should only need the title and background styles from the design, The content will be provided by others.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:16 (7 by maintainers)

github_iconTop GitHub Comments

linux-nerdcommented, Oct 10, 2018

Am I the only one that doesn’t like the name closable? What about canBeClosed?

I am fine with closable. 😃

crysfelcommented, Oct 8, 2018

No, the content should be independent of the Panel. We are going to add a placeholder for loading large images, I have a PR where I’m going to include that.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Chapter 8. Developing reusable components - Wicket in Action
In this chapter, we'll look at creating reusable components. ... Imagine a component that combines a search panel, a pageable results list, filters, ......
Read more >
Creating Reusable ASCX Panels and Components
Reusable panels are simply fragments of a page and are created as ASCX controls instead of ASPX pages. Just like a page, they...
Read more >
How Do You Use Reusable Components in Figma?
You can use reusable components just like any other element in Figma. Simply drag and drop them from the “Components” or “Global Components” ......
Read more >
Reusable Components
It allows you to create reusable components that can be used multiple times ... the Component name from the Layers & Components panel...
Read more >
Discovering reusable components in a screen
On the right panel under the Reusable Component section, click on the “See all components” link—this will list all the components used in...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found