https://github.com/rcaferati/ras-fullpage-strategies

React awesome slider fullpage strategies and usage examples.
https://github.com/rcaferati/ras-fullpage-strategies

Last synced: about 2 months ago
JSON representation

React awesome slider fullpage strategies and usage examples.

• Host: GitHub
• URL: https://github.com/rcaferati/ras-fullpage-strategies
• Owner: rcaferati
• Created: 2020-01-13T13:03:04.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-23T18:08:44.000Z (over 1 year ago)
• Last Synced: 2024-02-13T08:35:50.448Z (10 months ago)
• Language: CSS
• Homepage: https://fullpage.caferati.me
• Size: 130 KB
• Stars: 51
• Watchers: 4
• Forks: 20
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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](https://github.com/rcaferati/ras-fullpage-strategies)

## Live preview

Access the live preview at: [fullpage.caferati.me](https://fullpage.caferati.me)

[](https://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](https://github.com/rcaferati/ras-fullpage-strategies/tree/master/nextjs-example).

| 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.                                        |

```JS

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 (

     
Page One

        },

        {

          slug: "page-two",

          className: "page-two",

          children: () => 
Page Two

        }

      ]}

    />

   )

}


// Page header navigation

const Header = () => {

  return (

    

      

        Page One

        Page Two

      

    

  )

}

// Wrapp the aplication with the navigation Provider passing down the current page slug.

const App = () => {

  const slug = "[THE INITIAL RENDERED SLUG]";

  return (

    

      

      

    

  )

}

```