FormidableLabs / FormidableLabs/spectacle
How to add a link that jumps to another slide page
- 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
Assessment
This issue has not been assessed yet.