@jamescookuniversity/jcu-web-app-template

JCU web application template ==== This package contains a ReactJS component that can wrap the contents of a web application, providing the default style of a header and footer.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@jamescookuniversity/jcu-web-app-template
Minified + gzip package size for @jamescookuniversity/jcu-web-app-template in KB

Readme

JCU web application template

This package contains a ReactJS component that can wrap the contents of a web application, providing the default style of a header and footer.

Included libraries

The following libraries are required to be included for this template:

  • Bootstrap 4.1.0 or higher.

Installation and usage

Install with the following command:

npm install --save @jamescookuniversity/jcu-web-app-template

Use the template as follows:

import Template from '@jamescookuniversity/jcu-web-app-template';

export default (props) => {
    return (
        <Template title="Sample application">
            <h1>Hello, world!</h1>
            <p>This is some content.</p>
        </Template>
    );
}

Application Navigation menu

The navigation menu under the title text can be customised. Provide a structure to the nav attribute of the Template component to like so (note: href is only needed on leaf nodes of the tree):

const navMenu = [
    {href: 'https://www.acme.com', label: 'ACME site'},
    {label: 'Menu', children: [
        {href: '/about', label: 'About this app'},        
        {href: '/contacts', label: 'Contacts'}        
    ]}
];

class App extends Component {
    render() {
        <Template title="Sample application" nav={navMenu}>
            <h1>Hello, world!</h1>
            <p>This is some content.</p>
        </Template>
    }
}

Purposes of included files

Each file in this project has a purpose as described below:

  • src/Footer.js - Footer component
  • src/Header.js - Header component
  • src/index.js - default file - Exports the Template component.
  • src/JcuNavbar.js - Components to generate the Navbar. Used by Header.
  • src/Template.js - The custom Template component for web applications
  • src/Template.test.js - A test written with Jest that'll render the template and ensure it succeeds.
  • .babelrc - Defines how babel transpiler treats the code
  • .gitignore - Specified files are ignored in git add commands
  • .npmignore - Specified files are ignored when packaging for NPM
  • Jenkinsfile - Instructions to build this component on the JCU Jenkins server.
  • package.json - Package metadata, dependencies, etc.
  • README.md - The file you're reading right now.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.