{line}
; 9 | }) 10 | : null; 11 | }; 12 | 13 | return ( 14 |
](https://fullpage.caferati.me/)
9 |
10 | ## Implementation
11 |
12 | 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).
13 |
14 | | Method | Type | Description |
15 | | :---------------------- | :----------------------- | :-------------------------------------------------------------------------------- |
16 | | Provider | `Context Provider` | A context provider component for the application to be wrapped in. |
17 | | withNavigationContext | `Context Consumer` | A navigation context consumer for accessing the navigation object as a prop. |
18 | | withNavigationHandlers | `Navigation Handlers` | A HOC to add the navigation handlers to your AwesomeSlider instance. |
19 | | Link | `Link Component` | A Link component for handling page linking. |
20 |
21 | ```JS
22 | import AwesomeSlider from "react-awesome-slider"
23 | import 'react-awesome-slider/dist/styles.css';
24 |
25 | import {
26 | Provider,
27 | Link,
28 | withNavigationContext,
29 | withNavigationHandlers
30 | } from "react-awesome-slider/dist/navigation";
31 |
32 | // Wrapp the AwesomeSlider component with the navigationHandlers
33 | const NavigationSlider = withNavigationHandlers(AwesomeSlider);
34 |
35 | // Create an AwesomeSlider instance with some content
36 | const Slider = () => {
37 | return (
38 | Page One
45 | }, 46 | { 47 | slug: "page-two", 48 | className: "page-two", 49 | children: () =>Page Two
50 | } 51 | ]} 52 | /> 53 | ) 54 | } 55 | 56 | // Page header navigation 57 | const Header = () => { 58 | return ( 59 |