Skip to content

Commit d832441

Browse files
mesqueebmesqueeb
committed
chore: lint, cleanup, prep for release v2.0.0
1 parent 13cc2f6 commit d832441

17 files changed

+369
-116
lines changed

‎README.md

Lines changed: 35 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,21 @@
1-
# React Page Transition
1+
# React Page Transition ⚛️💨
22

3-
⚛️💨 A React component that makes it easy to use the page transitions from the Codedrops Page Transitions Demo [See Original](https://tympanus.net/Development/PageTransitions/).
3+
<a href="https://www.npmjs.com/package/@mesqueeb/react-page-transition"><img src="https://img.shields.io/npm/v/@mesqueeb/react-page-transition.svg" alt="Total Downloads"></a>
4+
<a href="https://www.npmjs.com/package/@mesqueeb/react-page-transition"><img src="https://img.shields.io/npm/dw/@mesqueeb/react-page-transition.svg" alt="Latest Stable Version"></a>
5+
6+
A React component that makes it easy to use the page transitions from the Codedrops Page Transitions Demo [See Original](https://tympanus.net/Development/PageTransitions/).
47

58
## Version Support
69

7-
This package was forked from [@steveeeie/react-page-transition](https://github.com/Steveeeie/react-page-transition).
10+
Many thanks to [@steveeeie/react-page-transition](https://github.com/Steveeeie/react-page-transition) for spearheading combining react-router with react-transition-group.
11+
12+
Improvements made:
13+
14+
- ✅ Added support for Vite & react-router v6
15+
- ✅ Upgraded TypeScript to v5
16+
- ✅ Converted to monorepo to easily manage multiple demo apps
17+
- ✅ Deprecated reliance on styled-components in favour of vanilla React code
18+
- ✅ Drop support for legacy CJS in favour of ESM
819

920
Currently supports:
1021

@@ -23,17 +34,12 @@ Currently supports:
2334

2435
## Usage with `react-router`
2536

26-
### 1. Install Package
27-
28-
`npm i @mesqueeb/react-page-transition`
29-
30-
### 2. Install Peer Dependencies
31-
32-
`npm i react-router-dom@^6.30.1`
33-
34-
### 3. Code Example
37+
```sh
38+
npm i @mesqueeb/react-page-transition
39+
npm i react-router-dom@^6.30.1
40+
```
3541

36-
#### App.js
42+
### Code Example
3743

3844
```tsx
3945
import { PageTransition } from '@mesqueeb/react-page-transition'
@@ -44,6 +50,7 @@ function RoutesWrapper() {
4450
const location = useLocation()
4551
return (
4652
<PageTransition preset="moveToLeftFromRight" transitionKey={location?.pathname}>
53+
{/* MUST pass `location` for it to work correctly! */}
4754
<Routes location={location}>
4855
<Route path="/" element={<h1>Home</h1>} />
4956
<Route path="/about" element={<h1>About</h1>} />
@@ -55,6 +62,7 @@ function RoutesWrapper() {
5562
function App() {
5663
return (
5764
<React.StrictMode>
65+
<style lang="css">{`html, body, #root { height: 100dvh }`}</style>
5866
<BrowserRouter>
5967
<Link to="/">Home</Link>
6068
<Link to="/about">About</Link>
@@ -69,17 +77,22 @@ Wrap your routes inside the `PageTransition` component and pass one of the prese
6977

7078
You will also need to pass the current `location.path` to the `transitionKey` prop, this is so that the internal `TransitionGroup` can track which components are entering and exiting.
7179

72-
#### styles.css
80+
`PageTransition` is styled with `height: 100%`, so the parent containers need to be given a height for it to render correctly. In this code example we use `height: 100dvh`. If you have extra div layers, make sure they grow to their parent height.
7381

74-
```css
75-
html,
76-
body,
77-
#root {
78-
height: 100dvh;
79-
}
80-
```
82+
## Demo Apps
83+
84+
It's easy to see the demo apps:
8185

82-
`PageTransition` is styled with `height: 100%`. The parent containers need to be given a height for it to render correctly because of this.
86+
```sh
87+
git clone https://github.com/mesqueeb/react-page-transition.git
88+
npm i
89+
# then you can run the demo with:
90+
npm run dev:demo-react-router-v6-advanced
91+
# or
92+
npm run dev:demo-react-router-v6
93+
# or
94+
npm run dev:demo-react-router-v5
95+
```
8396

8497
## Props
8598

‎demo-reach-router/index.html

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,16 @@
77
<title>Vite + React + TS</title>
88
</head>
99
<body>
10-
<div id="root"></div>
10+
<div
11+
id="root"
12+
style="
13+
width: 100dvw;
14+
height: 100dvh;
15+
display: flex;
16+
flex-direction: column;
17+
align-items: stretch;
18+
"
19+
></div>
1120
<script type="module" src="/src/main.tsx"></script>
1221
</body>
1322
</html>

‎demo-reach-router/package.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,13 @@
99
"lint": "eslint .",
1010
"preview": "vite preview"
1111
},
12+
"overrides": {
13+
"react": "^18.1.0",
14+
"react-dom": "^18.1.0"
15+
},
1216
"dependencies": {
17+
"@reach/router": "1.3.4",
18+
"@types/reach__router": "^1.3.15",
1319
"react": "^18.1.0",
1420
"react-dom": "^18.1.0"
1521
},

‎demo-reach-router/src/App.tsx

Lines changed: 75 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,79 @@
1-
import React from 'react'
2-
// import { BrowserRouter, Link, Route, Switch } from 'react-router-dom'
1+
import { Link, Router } from '@reach/router'
32
import './styles.css'
43

5-
// const Home = () => <h1>Home</h1>
6-
7-
// const About = () => <h1>About</h1>
8-
9-
function App() {
10-
return (
11-
<React.StrictMode>
12-
OK
13-
{/* <BrowserRouter>
14-
<Link to="/">Home</Link>
15-
<Link to="/about">About</Link>
16-
<Route
17-
render={({ location }) => {
18-
return (
19-
<PageTransition preset="moveToLeftFromRight" transitionKey={location.pathname}>
20-
<Switch location={location}>
21-
<Route exact path="/" component={Home} />
22-
<Route exact path="/about" component={About} />
23-
</Switch>
24-
</PageTransition>
25-
)
26-
}}
27-
/>
28-
</BrowserRouter> */}
29-
</React.StrictMode>
30-
)
31-
}
4+
// const Home = ({ style }: { style: CSSProperties }) => (
5+
// <div style={{ ...style, background: 'goldenrod' }}>
6+
// <h1>Home</h1>
7+
// </div>
8+
// )
9+
10+
// const About = ({ style }: { style: CSSProperties }) => (
11+
// <div style={{ ...style, background: 'lightseagreen' }}>
12+
// <h1>About</h1>
13+
// </div>
14+
// )
15+
16+
// function RoutesWrapper() {
17+
// const location = useLocation()
18+
// return (
19+
// // <PageTransition
20+
// // preset="moveToLeftFromRight"
21+
// // transitionKey={location?.pathname}
22+
// // style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}
23+
// // contentStyle={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}
24+
// // >
25+
// <Router style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>
26+
// {/* <Routes location={location}> */}
27+
// <Home path="/" style={{ flex: 1 }} />
28+
// <About path="/about" style={{ flex: 1 }} />
29+
// {/* </Routes> */}
30+
// </Router>
31+
// // </PageTransition>
32+
// )
33+
// }
34+
35+
// function App() {
36+
// return (
37+
// <React.StrictMode>
38+
// <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>
39+
// <Link to="/">Home</Link>
40+
// <Link to="about">About</Link>
41+
// <Router
42+
// style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}
43+
// >
44+
// {/* <Link to="/">Home</Link>
45+
// <Link to="/about">About</Link> */}
46+
// <Home path="/" style={{ flex: 1 }} />
47+
// <About path="about" style={{ flex: 1 }} />
48+
// </Router>
49+
// </div>
50+
// </React.StrictMode>
51+
// )
52+
// }
53+
54+
// FROM: https://codesandbox.io/p/sandbox/lyzwj8w0qz?file=%2Fsrc%2Findex.js%3A5%2C1&from-embed
55+
const App = ({ children }) => (
56+
<div>
57+
<nav>
58+
<Link to="/">Home</Link> <Link to="dashboard">Dashboard</Link>
59+
</nav>
60+
<Router>
61+
<Home path="/" />
62+
<Dashboard path="dashboard" />
63+
</Router>
64+
</div>
65+
)
66+
67+
const Home = () => (
68+
<div>
69+
<h2>Welcome</h2>
70+
</div>
71+
)
72+
73+
const Dashboard = () => (
74+
<div>
75+
<h2>Dashboard</h2>
76+
</div>
77+
)
3278

3379
export default App

‎demo-reach-router/src/styles.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
html,
22
body,
33
#root {
4-
height: 100%;
4+
margin: 0;
55
}

‎eslint.config.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@ export default [
88
{
99
files: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'],
1010
rules: {
11-
'@typescript-eslint/consistent-type-definitions': 'off',
12-
'@typescript-eslint/consistent-indexed-object-style': 'off',
1311
'@typescript-eslint/explicit-function-return-type': 'off',
1412
},
1513
},

0 commit comments

Comments
 (0)