[Question]Can I use this package in a ReactJS project?

[chmiiller]

Hi there, first of all thanks for this package that seems very well maintained and complete! I know that it might sound like a silly question, but can I use this package in a ReactJS project or it has to be a react-native-web one? I'm trying to make a Samsung Tizen TV app and of course I wanted to use React or React Native for it, but the thing is I never used react-native for something besides iOS or Android. I've managed to run a ReactJS app on my Samsung TV but I'm not sure how to do it with a react-native or react-native-web project This is where I'm coming from: https://stackoverflow.com/questions/57773000/how-do-i-build-a-create-react-app-in-tizen

Thanks again!

[asgvard]

Hi! This package has no hard dependencies on react-native(-web). It only uses react-native-web for the sandbox example project that is in the "App.js". So you can use it with ReactJS by simply wrapping your components in "withFocusable()"

[chmiiller]

oh good to know, thanks for the quick reply! I've made a test component like this:

import {withFocusable} from '@noriginmedia/react-spatial-navigation';

const styles = {
    defaultStyle: {
        backgroundColor: 'pink'
    },
    focusedStyle: {
        backgroundColor: 'black'
    },
};
const Button = ({title, focused, setFocus}) => {
    console.log(`>>>>>>>>>>>>> ${title} is focused: ${focused}`);
    return (
        <div>
            <button style={focused ? styles.focusedStyle : styles.defaultStyle}
            onClick={() => {
                console.log(`button click`);
            }}
            >{title}</button>
      </div>
    );
}

const FocusableButton = withFocusable()(Button);
export default FocusableButton;

and my App.js looks like this:

import {initNavigation, setKeyMap} from '@noriginmedia/react-spatial-navigation';

import FocusableButton from './components/Button';

initNavigation({
  debug: true,
  visualDebug: true
})

function App() {
  return (
    <div>
        <FocusableButton title={'Bt1'} />
        <FocusableButton title={'Bt2'} />
    </div>
  );
}

export default App;

but I don't see a change on the focused property when navigating with the keyboard arrow keys...am I missing something?

Let me know if you'd prefer to see this in a codesandbox for example. thanks again, have a great day

[asgvard]

Hi, you need to set initial focus somewhere. You can check how it is done in the example app in App.js. Basically your app component also has to be a focusable container, and you need to call "setFocus()" after mount with no params in order to "focus" your app. Then it will find the first child component to pass the focus to.

[chmiiller]

You're absolutely right, making the root component focusable and calling setFocus() inside useEffect works! Thank you so much