Yomguithereal / react-blessed

A react renderer for blessed.
MIT License
4.46k stars 176 forks source link

focus and tab order #73

Open geyang opened 6 years ago

geyang commented 6 years ago

@Yomguithereal Thanks for this great library!

I was looking for ways to put a component in focus but couldn't find it in the documentation. Is there anywhere I can look this up?

Thanks! Ge

Yomguithereal commented 6 years ago

Hum. I thinks that currently you might have to set a ref on the component and used blessed's API to focus the component as I think I did not implement any of the react callbacks used to deal with focus and component mounting etc.

gouegd commented 4 years ago

Here's a quick sample with hooks to focus if someone is looking for it

const App = () => {
    const listRef = useRef();
    useEffect(() => {
        if (listRef.current) {
            listRef.current.focus();
        }
    }, []);

    return (
        <box
            top="center"
            left="center"
            width="50%"
            height="50%"
            border={{type: 'line'}}
            style={{border: {fg: 'blue'}}}
        >
            <list
                ref={listRef}
                keys
                mouse
                items={['oui', 'maybe', 'no ?']}
                style={{
                    item: {fg: 'white'},
                    selected: {fg: 'cyan'}
                }}
            />
        </box>
    );
};
Yomguithereal commented 4 years ago

Thanks @gouegd.