Nostalgic Primordial Monster

    react-smart-sections

    0.0.2 • Public • Published

    React Smart Sections

    Vertical scroll solution that follows what you actually read

    Installation

    yarn add react-smart-sections
    
    npm install --save react-smart-sections
    

    Documentation

    import { Fragment as 👻 } from 'react';
    import { Section } from 'react-smart-sections';
     
    export const Page = () => (
      <👻>
        <Section name="introduction">
          <h1>Introductin</h1>
          <p>By default Section wraps it's content with a div</p>
        </Section>
        <Section name="chapterOne" component="section">
          <h2>Chapter one</h2>
          <p>You can also provide component prop that specifies html tag rendered by Section</p>
        </Section>
        <Section name="chapterTwo" render={(handleRef) => (
          <YourWrapperComponent ref={handleRef}>
            <h2>Chapter two</h2>
            <p>You can also use your wrapping component as long as you provide a reference to a rendered DOM element</p>
          </YourWrapperComponent>
        )} />
      </👻>
    );
    import { SectionsSpy } from 'react-smart-sections';
     
    const labels = {
      introduction: "Introduction",
      chapterOne: "Chapter one",
      chapterTwo: "Chapter two",
    };
     
    export const Navigation = () => (
      <nav>
        <ul>
          <SectionsSpy render={(sections) => (
            {sections.map(section => (
              <li key={section.name} className={section.active ? "active" : null}>
                <a href="#" onClick={section.scroll}>{labels[section.name]}</a>
              </li>
            ))}
          )} />
        </ul>
      </nav>
    )
    import { SectionSpy } from 'react-smart-sections';
     
    export const Navigation = () => (
      <nav>
        <ul>
          <SectionSpy
            name="introduction"
            render={section => (
              <li className={section.active ? 'active' : null}>
                <a href="#" onClick={section.scroll}>
                  Introduction
                </a>
              </li>
            )}
          />
        </ul>
      </nav>
    );

    Keywords

    none

    Install

    npm i react-smart-sections

    DownloadsWeekly Downloads

    204

    Version

    0.0.2

    License

    MIT

    Unpacked Size

    17.7 kB

    Total Files

    6

    Last publish

    Collaborators

    • netguru