React UI Panels

React UI Panels is a simple component library providing a simple interface to create a panelled UI for desktop and mobile browsing. It is ideally suited for portfolio style sites. One such example is below.

Installation

To begin make sure you're on a project with React in scope.

npm install react-ui-panels

or

yarn add react-ui-panels

Then require the components where you need them.

import { PanelsContainer, Panel } from 'react-ui-panels'; 

Usage

Getting Started

The simplest way to use react-ui-panels is to import the two main components, create the <PanelsContainer /> and then nest <Panel />s beneath it. The number of panels you can add isn't limited, although, the more you add the less space will be available to view the content when they are expanded.

import React from 'react';
import { PanelsContainer, Panel } from 'react-ui-panels'; 

function App() {
  return (
   <PanelsContainer>
     <Panel
      title={"Panel 1"}
      background={'#f7f7f7'}
     >
       <p>This content is hidden behind the left hand panel.</p>
     </Panel>

     <Panel
      title={"Panel 2"}
     >
       <p>This content is hidden behind the right hand panel.</p>
     </Panel>
   </PanelsContainer>
  );
}

export default App;

Panel Container

The <PanelsContainer />takes several arguments:

• footer - bool
• footerImage - image (will add text option at later date)
• footerAlt - string

The default state is no footer. Both the footer and a footer image are required in order to correctly create a footer.

Example Code

const footerImage = '../src/images/footer/footerImage.png';

    <PanelsContainer 
        footer
        footerImage={footerImage}
        footerImageAlt={"A glorious footer you really should see it"}
    >
    // Panels
    </PanelsContainer>

Note 1

The footer also acts as a reset button on the browser, bringing the panels back to their evenly expanded state. As mobile has no browser, due to the panels being aligned vertically, the title of each panel also has this effect.

Note 2

The <PanelsContainer />sizes itself to window.innerHeight on mobile screens to avoid issues with iOS Safari changing the size of the screen on scroll and ruining the 'panel' effect. Therefore on some phones it will be smaller than when viewing on the Chrome simulation of an iPhone for example. Be wary of this when using more than 4 panels.

Panels

The <Panel />takes several mnore arguments:

• title - string
• titleSize - options of "small", "medium", "large" - default is medium
• titleColor - string
• titleImage - image (preferably a square shape)
• background - string
• backgroundImage - image

Example Code

const lovelySquareImage = '../src/images/squareImages/lovelySquareImage.png';

    <Panel 
        title={"Panel 1"}
        titleSize={"small"}
        background={'#f3f3f3'}
        titleColour={"#545353"}
        titleImage={lovelySquareImage}
    >
    // Panel Content
    </Panel>

Note 1

The <Panel /> title text becomes the text used when the panel is collapsed and another is expanded, any titleImage is automatically hidden upon collapse or expansion. It is only viewable in the equally expanded state.

Note 2

The <Panel /> backgroundImage will occupy the whole background of the panel and should be CSS centred.

Panel Content

I have deliberately left panel content open for people to do as they wish. There is minimal CSS binding the panels when they open. Mostly it is just plain UI scrolling stuff. So people are free to use CSS frameworks of their choice.