rcaferati / ras-fullpage-strategies

React awesome slider fullpage strategies and usage examples.

React Awesome Slider Navigation HOC strategies

React awesome slider fullpage strategies and usage examples. For more information about the slider itself please access the main repository at rcaferati/react-awesome-slider

Live preview

Access the live preview at: fullpage.caferati.me

Implementation

The Navigation HOC exposes a number of methods for dealing with fullpage navigation. The code bellow is a basic concept example, if you want a functional one just check out the NextJS example folder.

Method	Type	Description
Provider	Context Provider	A context provider component for the application to be wrapped in.
withNavigationContext	Context Consumer	A navigation context consumer for accessing the navigation object as a prop.
withNavigationHandlers	Navigation Handlers	A HOC to add the navigation handlers to your AwesomeSlider instance.
Link	Link Component	A Link component for handling page linking.

import AwesomeSlider from "react-awesome-slider"
import 'react-awesome-slider/dist/styles.css';

import { 
  Provider,
  Link,
  withNavigationContext,
  withNavigationHandlers
} from "react-awesome-slider/dist/navigation";

// Wrapp the AwesomeSlider component with the navigationHandlers
const NavigationSlider = withNavigationHandlers(AwesomeSlider);

// Create an AwesomeSlider instance with some content
const Slider = () => {
  return (
    <NavigationSlider
      className="awesome-slider"
      media={[
        {
          slug: "page-one",
          className: "page-one",
          children: () => <p>Page One</p>
        },
        {
          slug: "page-two",
          className: "page-two",
          children: () => <p>Page Two</p>
        }
      ]}
    />
   )
}

// Page header navigation
const Header = () => {
  return (
    <Header>
      <nav>
        <Link href="page-one">Page One</Link>
        <Link href="page-two">Page Two</Link>
      </nav>
    </Header>
  )
}

// Wrapp the aplication with the navigation Provider passing down the current page slug.
const App = () => {
  const slug = "[THE INITIAL RENDERED SLUG]";

  return (
    <Provider slug={slug}>
      <Header />
      <NavigationSlider />
    </Provider>
  )
}