react-native-web-hover

Some enhanced elements for react-native-web to support hover on the web!

It requires a React Native version with Pressable support which was introduced in version 0.63

Demo

https://codesandbox.io/s/young-surf-bbmzz?file=/src/App.tsx

Installation

``sh npm install react-native-web-hover`

`Usage`


import { Hoverable, Pressable, } from 'react-native-web-hover'
// The Pressable, you can still provide normal styles or children without functions!
       style={({ hovered, focused, pressed }) => [
        styles.buttonRoot,
        hovered && styles.buttonHovered,
        focused && styles.buttonFocused,
        pressed && styles.buttonPressed
      ]}
    >
      {({ hovered, focused, pressed }) => (
        
          
            {label}
          
        
      )}

// The Hoverable {({ hovered }) => ( title="legacy button" onPress={() => {}} color={hovered ? "black" : "grey"} /> )}``

We recommend the "Pressable" component. You can see examples here:
https://codesandbox.io/s/young-surf-bbmzz?file=/src/App.tsx

$3

If your webapp is included in an iframe you will need the FlatList, ScrollViews or VirtualizedList from our library.

import { ScrollView, FlatList, VirtualizedList } from 'react-native-web-hover'

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT