react-styled-ghp

GitHub Pages component for React built with styled-components < 💅>

Install

npm install --save react-styled-ghp
yarn add react-styled-ghp

Basic Usage

• Import the GhPage component from package
• Wrap the demo conent inside GhPage
• Pass the in the desired options
  
  

import React, { Component } from 'react';
import GhPage from 'react-styled-ghp';

class Example extends Component {
  render () {
    const options = {
      logo: './path/to/logo',
      username: 'username',
      github: './url/of/repo',
      npm: './url/of/module',
      title: 'title',
      description: 'description',
      readMe: './path/to/readMe',
    }
    return (
      <GhPage {...options}>
        <div>Demo content goes here</div>
      </GhPage>
    )
  }
}

Partial Usage

If you only want to render parts of the GhPage, you can import the indiviual components (Header, Demo, Layout). Make sure to pass the layout object to all of the components you wish to render.

import { Header, Demo }  from 'react-styled-ghp';

...
return (
  <div>
    <Header {...options} />
    <Demo {...options}>
      <div>Demo content goes here</div>
    </Demo>
  </div>
);
...

Features

• Simple setup
• Clean & responsive design
• Readme w/ syntax highlighting
• Easy to use BEM class hooks

Examples

• Demo - https://alexcasche.github.io/react-styled-ghp/

Props

The GhPage component accepts the following props.

Prop	Type	Default	Description: Options
logo	string	null	Path to logo: url
username	string	null	Github username
github	string	null	Github repo: url
npm	string	null	NPM pacakge: url
title	string	null	Page title: [base]-subname
description	string	null	Page decription
readme	string	null	Path to readme: url
theme	object	see below	Theme object: see below

Note:
The page title text is colored using the format [hoverText]-lightText. For example, the current page uses: [react]-styled-ghp

Theme

The theme object can be used to customize the look of the component, with the following values.

Prop	Type	Default
headerBG	string	#20232A
bannerBG	string	#292C34
pageBG	string	#484C59
fontSans	string	inherit
headerColor	string	#DDDDDD
bannerColor	string	#DDDDDD
pageColor	string	#20232A
hoverColor	string	#34f96E

There are two ways to use the theme object.

1. Pass the theme to the styled-components ThemeProvider (recommended)

import { ThemeProvider } from 'styled-components';

...
return (
  <ThemeProvider theme={theme}>
    <GhPage>
      <div>Demo content goes here</div>
    </GhPage>
  </ThemeProvider>
);
...

2. Pass the theme directly to the GhPage component (not recommended)

...
return (
  <GhPage theme={theme} />
);
...

Classes

For more control over the styles, you can use the following BEM classes.

Class	Description
.ghp__page	Page wrapper
.ghp__header	Header section
.ghp__username	Header username
.ghp__logo	Header logo
.ghp__link	Header link
.ghp__demo	Demo section
.ghp__title	Demo title
.ghp__description	Demo description
.ghp__readme	Readme section
.ghp__markdown	Readme markdown

Development

Follow these steps to setup a local development environment. Use yarn or npm - not both.

1. Clone the repo from Github

git clone https://github.com/alexcasche/react-styled-ghp

2. Setup project & start rollup watch

npm install && npm start
yarn install && yarn add

3. Setup react app & start dev server

cd example
npm install && npm start
yarn install && yarn start

Shoutouts

• Setup: create-react-library 🙌

License

MIT © alexcasche