FormidableLabs / FormidableLabs/spectacle

How to add a link that jumps to another slide page

Open
#1,248 2 comments 0 reactions 0 assignees View on GitHub
🤔 Question
Dominant language
TypeScript
Stars
10.2k
Forks
700
PR merge metrics
No merged PRs in 30d

Description

Thanks for your excellent work, `spectacle` is great, I like it so much.

As an Emacs user, I wrote [ox-spectacle](https://github.com/lorniu/ox-spectacle) to product spectacle slideshows. It is based on Emacs org-mode's export engine, which can greatly simplify the creation of slideshows with `spectacle`. The way `ox-spectacle` works is to translate the `org-marked` file into spectacle one-page html.

I have several problems then. One of them is that, how to add a link that jumps to another slide page?

I wrote a component like this:
```javascript
const { Slide, Deck, Link, Text } = Spectacle;
import htm from 'https://unpkg.com/htm@^3?module';
const html = htm.bind(React.createElement);

const MyLink = React.forwardRef((props, ref) => {
const { skipTo } = React.useContext(Spectacle.DeckContext);
return html`
<${Link} ref=${ref} ...${props}
onClick=${e => { e.preventDefault(); skipTo({slideIndex: props.id}) }}>
`;
});

const Slides = () => html`
<${Deck}>
<${Slide}>
Slide One

<${Slide}>
<${MyLink} id="0">Slide 2. Click to jump to Slide 1

`;

ReactDOM.createRoot(document.getElementById('root')).render(html`<${Slides}/>`);
```

It does do the jump, but the `window.location` not sync after jump. Forgive my poor knowledge about ReactJS, I really don't know why.

Please help me, or tell me any better way to do the job.

Thanks.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.