https://github.com/englishtom/react-midday

A React wrapper for the midday.js module
https://github.com/englishtom/react-midday

css fixed header javascript midday midnight nav react ui

Last synced: 27 days ago
JSON representation

A React wrapper for the midday.js module

• Host: GitHub
• URL: https://github.com/englishtom/react-midday
• Owner: englishtom
• License: mit
• Created: 2019-04-08T16:19:03.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T19:23:33.000Z (over 3 years ago)
• Last Synced: 2026-03-20T00:43:46.720Z (about 2 months ago)
• Topics: css, fixed, header, javascript, midday, midnight, nav, react, ui
• Language: JavaScript
• Size: 2.07 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 23
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# react-midday

A React wrapper for the [midday.js](https://github.com/englishtom/midday.js) module.

## Installation

react-midday is available on NPM as **react-midday**:

```

npm install react-midday

```

## Basic Example

```jsx

import React from 'react';

import {MiddayHeader, MiddaySection} from 'react-midday';

const App = () => (

    


        

            My Logo

        


        

            The default header will be shown here

        

        

            The blue header will be shown here

        

    

)


export default App;

```

## Using custom markup

```jsx

import React from 'react';

import {MiddayHeader, MiddaySection} from 'react-midday';

const App = () => {

    const butterfly = '  ';

    return (

        


            

                


                    My Logo

                    


                


                


                    My Logo

                    


                

            


            

                The default header will be shown here

            

            

                The blue header will be shown here

            

        

    )

}


export default App;

```

## Options

```jsx

import React from 'react';

import {MiddayHeader, MiddaySection} from 'react-midday';

const App = () => {

    const options = {

        sectionSelector: 'noon',

        headerClass: 'customOuter',

        innerClass: 'customInner',

        defaultClass: 'primary'

    };

    return (

        


            

                My Logo

            


            

                The default header will be shown here

            

            

                The blue header will be shown here

            

        

    )

}


export default App;

```

## Running Multiple Instances with Different Breakpoints

```jsx

import React from 'react';

import {MiddayHeader, MiddaySection} from 'react-midday';

const App = () => (

    


        

            First Logo

        


        

            Second Logo

        

        

            Both headers get the default logo here

        

        

            First header will get the blue logo, second header will get the default logo

        

        

            Both headers will get the blue logo

        

    

)


export default App;

```