Giter VIP home page Giter VIP logo

navpush's Introduction

navpush

Build Status NPM JavaScript Style Guide License

Install

npm install --save navpush

react, react-dom, and prop-types are peerDependencies.

Example

import React, { Component } from 'react';

import 'navpush/dist/styles/Hamburger.css';
import 'navpush/dist/styles/PushRight.css';
import { PushRight, Hamburger } from 'navpush';

class App extends Component {
  render() {
    // navpush should go at the top of your body
    return (
      <PushRight
        fixbox={ ( isOpen, toggle ) => {
          // For any of the off-canvas animations, you will need to place your
          // fixed elements inside the fixbox render prop as shown here.
          return (
            <header>
              <a className="logo" href="/">
                Name of site
              </a>
              {
                // The exported Hamburger component is added for convenience, but you can use whatever
                // component you would like to trigger the open menu as long
                // as it calls the toggle callback.
              }
              <Hamburger onClick={ toggle } />
            </header>
          );
        } }
        nav={ ( isOpen, toggle ) => {
          // Place all your nav content here. You can also include a close
          // button and pass it the toggle callback to close the menu.
          return (
            <div>
              <button className="CloseBtn" onClick={ toggle } />
              <ul>
                <li>
                  <a href="/Features">Features</a>
                </li>
                <li>
                  <a href="/About">About</a>
                </li>
                <li>
                  <a href="/Contact">Contact</a>
                </li>
              </ul>
            </div>
          );
        } }
      >
        {( isOpen, toggle ) => {
          // Place your page's content (elements that are not fixed) as children.
          return <section className="hero">Hello World!</section>;
        }}
      </PushRight>
    );
  }
}

export default App;

Styling

Regular CSS files are provided in the `dist`` folder for each component that you can import:

import 'navpush/dist/styles/Hamburger.css';
import 'navpush/dist/styles/PushRight.css';

CSS Modules are also supported by importing the navpush/styles/*.module.scss files of your choice and passing them to the relevant component(s) as theme props. Here is an example of using the Hamburger and OverlayLeft themes

import React, { Component } from 'react';

import HamburgerTheme from 'navpush/dist/styles/Hamburger.module.scss';
import Theme from 'navpush/dist/styles/PushRight.module.scss';
import { OverlayLeft, Hamburger } from 'navpush';

class App extends Component {
  render() {
    return (
      <OverlayLeft
        theme={ Theme }
        nav={ ( isOpen, toggle ) => <div>Sidebar content</div> }
      >
        {( isOpen, toggle ) => (
          <div>
            <header>
              <Hamburger theme={ HamburgerTheme } onClick={ toggle } />
            </header>
            <section className="hero">Hello World!</section>;
          </div>
        )}
      </OverlayLeft>
    );
  }
}

export default App;

License

MIT

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.