search

rafgraph / react-router-hash-link

Hash link scroll functionality for React Router
https://react-router-hash-link.rafgraph.dev
MIT License
734 stars 62 forks source link

Slate js support #74

Closed Jackbaude closed 3 years ago

Jackbaude commented 3 years ago

I've made a slate app and I've made all headers generate a anchor that is the header text itself - to lowercase and replacing all spaces with hyphens. Is this a issue with how react-router-hash-link works or the way that slate generates the dom?

Here is the element that slate returns when it catches a heading

import { HashLink } from 'react-router-hash-link';

const Header1Element = ({attributes, children, element}) => {
    const anchorId = Node.string(element).toLowerCase().replaceAll(/\s+/g, '-')
    return <HashLink to={"#" + anchorId}><h1 id={anchorId}{...attributes}>{children}</h1></HashLink>
}
rafgraph commented 3 years ago

@Jackbaude I'm not sure I understand what the issue is, can you be more specific of what's not working?

Jackbaude commented 3 years ago

It seems that the slate js editor loads after the window loads. Something like useLayoutEffect has to be used with slate js. This isnt a problem with your code base, excuse the misleading title.