Have ideas to improve npm?Join in the discussion! »

    react-sky-bg

    1.0.0 • Public • Published

    React Stencil

    This is a ReactJS component that generates a base

    for your application and renders a background modeled after the sky. The fun part is that this component has basic logic to detect the client's time of day and change the sky to reflect dawn, day, dusk, or night time. Stars for mystery.

    Installation

    Simply install as a dependency in your React application

    1. Create a new React application
    2. Navigate into your directory
    3. Run the following command:
    npm install react-sky-bg

    Usage

    Import this component into the file that controls your layout. You can then place this component as the wrapper around the rest of your application, and it will render a background div with z-index: -1. The stars are rendered as an absolutely positioned canvas element, so they will only appear in the initial viewport that is rendered.

    Here's a simple example:

    import React from "react";
    import SkyBG as Background from "./skybg";
    import Header from "./header";
    import Footer from "./footer";
     
    export default ({ children }) => (
      <Background>
        <Header />
        {/* This is the main pane/content section */}
        <div>{children}</div>
        <Footer />
      </Background>
    );

    As a note, for the stars to not interfere or overlap other components, they will need to use a CSS position that puts them in the same stacking context. You can read more about stacking context here.

    Keywords

    none

    Install

    npm i react-sky-bg

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    ISC

    Unpacked Size

    7.9 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar