react-js-spatial-navigation
react-js-spatial-navigation copied to clipboard
Support for leaveFor
I've used js-spatial-navigation in another project that wasn't using react. Now I'm considering using it again for a react-based project, hence I ended up finding your library. One feature I'd probably miss is the ability to specify leaveFor
in sections. Conceptually, that means that you'd need a way to specify the section ID in the component properties, instead of auto-generating them. Is this something you've considered?
I've had to do this in a project of mine.
// FocusableSection.js
getChildContext() {
return { focusableSectionId: this.sectionId }
}
// ...
componentWillMount() {
this.sectionId = this.props.id ? this.props.id : `section-${sectionsIds++}`
}
// ...
JsSpatialNavigation.add({
leaveFor: this.props.leaveFor, // TODO: Add more options like this
id: this.sectionId,
selector: selector,
enterTo: enterTo,
defaultElement: defaultElement
})
Some bits may be missing but you get the idea :)
I have a PR open, did it via RenderProps and added a neighborLeft
/neighborRight
/neighborDown
/neighborUp
as well as a sectionId
property which is needed. It all maps through to the sectionId
and leaveFor: {neighborLeft, neighborRight, neighborDown, neighborUp}
which gets passed to js-spatial-navigation
You can yarn add https://github.com/chwagssd/react-js-spatial-navigation.git
if you like for now, until PR #11 gets merged by @dead