Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/EvanBacon/react-native-web-hooks
Hooks for React Native web and Expo
https://github.com/EvanBacon/react-native-web-hooks
hooks react react-native react-native-web
Last synced: 11 days ago
JSON representation
Hooks for React Native web and Expo
- Host: GitHub
- URL: https://github.com/EvanBacon/react-native-web-hooks
- Owner: EvanBacon
- License: mit
- Created: 2019-06-24T20:52:12.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-12-13T21:43:18.000Z (almost 3 years ago)
- Last Synced: 2024-09-15T01:28:41.110Z (about 2 months ago)
- Topics: hooks, react, react-native, react-native-web
- Language: TypeScript
- Size: 278 KB
- Stars: 197
- Watchers: 6
- Forks: 10
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-web-hooks
Hooks for implementing complex functionality in React Native for web and Expo.
A closer look at [how the hooks work here](https://gist.github.com/EvanBacon/8739dc52a4dbb72e869f19b1e5cdda6c).
## Installation
```bash
yarn add react-native-web-hooks
or
npm install --save react-native-web-hooks
```
### Usage - Hooks
Import the library into your JavaScript file:
```js
import {
useDimensions,
useActive,
useFocus,
useHover,
useREM,
useScaledSize,
} from 'react-native-web-hooks';
```
#### Get REM size
Use these in place of rem font sizes like: `font-size: 1.3rem`.
> Note: this isn't a hook anymore and will be moved out in the future.
```jsx
const fontSize = useREM(1.3);
return ;
```
#### Get scaled font size
These change based on the width of the screen.
```jsx
const fontSize = useScaledSize(1.5);
return ;
```
#### Get dimensions
Note that `fontScale` is hard-coded to `1` on the `react-native-web` side and shouldn't be used to calculate dynamic font sizes.
```jsx
const {
window: { width, height, fontScale, scale },
screen,
} = useDimensions();
```
#### Measure a view
It's best to style a view based on that own view's size and not the window size. To make this easier you can use the `useLayout` hook!
> 🚨 Using `onLayout` may require you to install `resize-observer-polyfill`. Learn more in [the official Expo docs](https://docs.expo.io/versions/latest/guides/customizing-webpack/#resizeobserver)
```jsx
const {
onLayout,
width,
height,
x,
y
} = useLayout();
return
```
#### Create pseudo class styles
These will be replaced by **React Flare** when it's released.
```jsx
import { useRef } from 'react';
import { StyleSheet, Linking, Text, Platform } from 'react-native';
import { useHover, useFocus, useActive } from 'react-native-web-hooks';
function Link({ children, href = '#' }) {
const ref = useRef(null);
const isHovered = useHover(ref);
const isFocused = useFocus(ref);
const isActive = useActive(ref);
return (
Linking.openURL(href)}
tabIndex={0}
ref={ref}
style={[
styles.text,
isHovered && styles.hover,
isFocused && styles.focused,
isActive && styles.active,
]}>
{children}
);
}
const styles = StyleSheet.create({
text: {
...Platform.select({
web: {
cursor: 'pointer',
outlineStyle: 'none',
borderBottomWidth: 1,
borderBottomColor: 'transparent',
transitionDuration: '200ms',
},
default: {},
}),
},
active: {
color: 'blue',
borderBottomColor: 'blue',
opacity: 1.0,
},
hover: {
opacity: 0.6,
},
focused: {
borderBottomColor: 'black',
},
});
```
### Usage - Render Props
Import the library into your JavaScript file:
```js
import { Hoverable, Resizable } from 'react-native-web-hooks';
```
You can wrap a function or a component.
```tsx
import React, { Component } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { Hoverable } from 'react-native-web-hooks';
const createLogger = (...msg) => () => {
console.log(...msg);
};
class App extends Component {
render() {
return (
{isHovered => (
Welcome to React}
)}
);
}
}
```
Observe window resize events.
```tsx
return (
{layout => }
);
```