React-static: How do I modify the base Document to also include "Footer" as well?

Created on 20 Jan 2018 · 3Comments · Source: react-static/react-static

on static.config.js
https://github.com/nozzle/react-static#configuration-staticconfigjs

I can assign an optional custom React component "Document", to render the base document for every pages, but I only noticed the props of "Html, Head, Body, children, siteProps, renderMeta", so if I wanna include a new props called "Footer", and put it under

<Html lang="en-US">
      <Head>
        <meta charSet="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <Body>{children}</Body>
    <Footer/>
    </Html>

How should I do so?

Source

killvung

Most helpful comment

The "Header" in the examples is actually defined in App.js (see https://github.com/nozzle/react-static/blob/master/examples/basic/src/App.js). I would recommend putting a footer here and not in the Document portion of the config.

mjsisley on 20 Jan 2018

👍2

All 3 comments

The maintainers of this repository would appreciate it if you could provide more information.

request-info[bot] on 20 Jan 2018

mjsisley on 20 Jan 2018

👍2

The <header><header> and <footer></footer> are enclosed in the <body></body> tags.
The <head></head> tags serve an entirely different purpose in HTML

html <!DOCTYPE html> <Html lang="en-US"> <Head> <meta charSet="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> </Head> <Body> <header> <nav></nav> </header> {children} <footer> </footer> </Body> </Html>

so.. in JSX, you would just add a footer into a component;
js import React from 'react' export default (props) => { return ( <footer>footer text</footer> ) }