https://github.com/alloc/react-scenic
(WIP) Experimental router for React Native
https://github.com/alloc/react-scenic
react react-native
Last synced: 9 months ago
JSON representation
(WIP) Experimental router for React Native
- Host: GitHub
- URL: https://github.com/alloc/react-scenic
- Owner: alloc
- License: mit
- Archived: true
- Created: 2019-08-03T14:08:12.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-10-16T17:31:55.000Z (over 2 years ago)
- Last Synced: 2025-03-01T07:27:30.640Z (11 months ago)
- Topics: react, react-native
- Language: TypeScript
- Homepage:
- Size: 723 KB
- Stars: 2
- Watchers: 4
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-scenic
The best observable router for React. 🌋
## API
The API is under development. Expect breaking changes and undocumented features.
### Scenic
The `` component decides which scenes are mounted, which scene is focused, and which scenes have been visited.
```tsx
{children}
```
Â
### ScenicRoot
The context of a `` component. It tracks the current scene as well as past scenes. Its properties can be used in a `withAuto` component (eg: to render elements conditionally).
Â
### useScenic
Use the `ScenicRoot` of the nearest `` ancestor.
```ts
const scenic = useScenic()
scenic.visit('/')
```
Â
### useScenicRef
Convenience hook for `useRef(null)`
Useful in the parent that renders a `` component.
```tsx
const scenicRef = useScenicRef()
const rootElement = {scenes}
useEffect(() => {
scenicRef.current.visit('/foo')
})
```
Â
### useScene
Use the `Scene` of the nearest `` ancestor.
```ts
const scene = useScene()
```
Or get the `Scene` for a path, creating one if necessary:
```ts
const scene = useScene(path)
```
Â
### Scene
Scenes are used to conditionally render elements based on the current path (or the history of paths) of the nearest `` component ancestor. Its properties can be observed by any `withAuto` component.
To create a `Scene`, you can call `ScenicRoot#get` or the `useScene` hook.
```ts
const scene = useScene('/')
// ..same as..
const scenic = useScenic()
const scene = scenic.get('/')
```
Both calls are idempotent, meaning they will always return the same `Scene` if you ever pass the same path multiple times.
Â
### SceneMatch
Render children if a given `path` or `scene` is mounted.
```tsx
// with a path:
{children}
// or with a Scene object:
{children}
```