v0.2.5
Documentation
IntroductionGetting StartedSyntaxComponentsThemingPresentExamples
API
@mdxp/core
ComponentsHooksuseDeckuseStepuseNavigationuseResizeObserverUtil
@mdxp/components
@mdxp/rehypex-plugins

useDeck

This hook returns the deck context, which is an object with useful information about the state of the deck.

Returns

mode
deckModes
slideLength
number > 0
slideIndex
number ∈ [0, slideLength[
stepLength
number > 0
stepIndex
number ∈ [0, stepLength[
rawStepIndex
string
preview
bool

Examples

import {useDeck} from '@mdxp/core'
const Footer = (props) => {
  const deck = useDeck();
  return (
    <span>
      {deck.slideIndex} / {deck.slideLength}
    </span>
  );
}

useStep

This hook allows to allocate a certain number of steps for your component.

NOTE
If your component is being used in a Step, the returned stepIndex might be -1 to indicate that your component has not been "stepped" through yet.

Arguments

length
number > 0
required

Returns

stepIndex
number ∈ [-1,length[

Examples

import {useStep} from '@mdxp/core'
const ChangeColor = ({children}) => {
  const colors = ['red', 'green', 'blue'];
  const stepIndex = useStep(colors.length);
  return (
    <div style={{color: colors[stepIndex]}}>
      {children}
    </div>
  );
}

useNavigation

This hooks returns an object with a number of useful navigation functions.

Returns

next
() => void
previous
() => void
nextSlide
(step=0:number) => void
previousSlide
(step=0:number) => void
navigate
(slide:number, step=0:Integer, mode=currentMode:deckMode, replace=false:Boolean) => void
setMode
(mode:deckMode) => void

Examples

import {useNavigation} from '@mdxp/core'
const LinkSlide = ({slide, step, text}) => {
  const {navigate} = useNavigation();   // Destructure object to extract only navigate
  return (
    <button onClick={() => {navigate(slide, step)}}>
      {text}
    </button>
  );
}

useResizeObserver

This hooks allows you to get the width and height of a certain HTML element and update your code when it changes.
This component has not much to do with presentations, but is used throughout the core codebase and might be useful to use.

NOTE
This hook was taken from Tobias Lindström and adapted to the needs of this project.

Returns

ref
Function │ { “current”: “any” }
width
number | undefined
height
number | undefined

Examples

import {useResizeObserver} from '@mdxp/core'
const ShowDimensions = () => {
  const [ref, width=0, height=0] = useResizeObserver();   // Give default width and height values
  return (
    <div ref={ref} style={{width: '100%', height: '100%'}}>
      This div has the following dimensions: {width} X {height} pixels
    </div>
  );
}