60 | );
61 | };
62 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | react-wavy-transitions
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-wavy-transitions
2 |
3 | Show wavy transitions between route changes, in your React 18 apps.
4 |
5 | Click [here for a demo](https://waves.frontendjoe.com/).
6 |
7 | Or [check out the npm package here](https://www.npmjs.com/package/react-wavy-transitions).
8 |
9 | ## Installation
10 |
11 | Just a few quick steps to get started:
12 |
13 | #### 1. Create a React app (optional)
14 |
15 | If you are adding the transitions to an existing app, you can skip this step.
16 |
17 | ```sh
18 | npx create-react-app my-wavy-app
19 | ```
20 |
21 | #### 2. Install dependencies
22 |
23 | Our project depends upon React's router library
24 |
25 | ```sh
26 | npm i react-wavy-transitions react-router-dom
27 | ```
28 |
29 | #### 3. Add components
30 |
31 | The package relies on two components being present.
32 |
33 | ##### WavyContainer
34 |
35 | This is what houses our wave transition between route changes and does not require any props.
36 |
37 | ##### WavyLink
38 |
39 | This button can be declared anywhere inside your Router component.
40 |
41 | It takes the following props:
42 |
43 | | Prop | Description | Example | type | required | default |
44 | | --------- | ------------------------------------------------------------------------ | ------- | ------------------ | -------- | ------- |
45 | | children | The content inside the link | About | String / Component | true | |
46 | | to | The route that the link will take you to | /about | String | true | |
47 | | color | The background color of the wave shapes. Must be a hexcode or rgba value | #8f44fd | String | false | #8f44fd |
48 | | direction | The direction that the wave shapes will move (options are up/down) | up | String | false | down |
49 | | duration | The duration in milliseconds of the total wave transition | 1200 | Number | false | 1500 |
50 |
51 | Be careful with the duration (too fast/slow can ruin the effect) - my recommended duration is between 1000ms and 1600ms.
52 |
53 | ##### Example App.tsx
54 |
55 | Copy this whole code snippet into your App.tsx for a basic example:
56 |
57 | ```typescript
58 | import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
59 |
60 | import { WavyContainer, WavyLink } from "react-wavy-transitions";
61 |
62 | const Home = () =>
Home
;
63 | const About = () =>
About
;
64 | const Contact = () =>
Contact
;
65 |
66 | function App() {
67 | return (
68 |
69 |
70 |
71 |
75 |
76 | Home
77 |
78 |
79 | About
80 |
81 |
82 | Contact
83 |
84 |
85 |
86 | }
87 | >
88 | } />
89 | } />
90 | } />
91 | No Match} />
92 |
93 |
94 |
95 | );
96 | }
97 |
98 | export default App;
99 | ```
100 |
101 | ### 4. Styling
102 |
103 | To style the WavyLink component you can target it via css (just be more specific than me 😄):
104 |
105 | ```css
106 | body .react-wavy-transitions__wavy-link {
107 | color: #af44fd;
108 | ...;
109 | }
110 | ```
111 |
112 | ### 5. DRY (Don't Repeat Yourself)
113 |
114 | To avoid repeating certain WavyLink props, I recommend creating your own generic link component that sets the props here by default.
115 |
116 | ```typescript
117 | import { FC, ReactNode } from "react";
118 | import { WavyLink } from "react-wavy-transitions";
119 |
120 | type Props = {
121 | to: string;
122 | children: ReactNode;
123 | };
124 |
125 | export const MyWavyLink: FC = ({ to, children }) => (
126 |
127 | {children}
128 |
129 | );
130 | ```
131 |
132 | ### 6. Have fun with it!
133 |
134 | Please hit me up on [My Instagram page](https://instagram.com/frontendjoe) for any support or suggestions 🙂
135 |
--------------------------------------------------------------------------------
/src/library/README.md:
--------------------------------------------------------------------------------
1 | # react-wavy-transitions
2 |
3 | Show wavy transitions between route changes, in your React 18 apps.
4 |
5 | Click [here for a demo](https://waves.frontendjoe.com/).
6 |
7 | Or [check out the npm package here](https://www.npmjs.com/package/react-wavy-transitions).
8 |
9 | ## Installation
10 |
11 | Just a few quick steps to get started:
12 |
13 | #### 1. Create a React app (optional)
14 |
15 | If you are adding the transitions to an existing app, you can skip this step.
16 |
17 | ```sh
18 | npx create-react-app my-wavy-app
19 | ```
20 |
21 | #### 2. Install dependencies
22 |
23 | Our project depends upon React's router library
24 |
25 | ```sh
26 | npm i react-wavy-transitions react-router-dom
27 | ```
28 |
29 | #### 3. Add components
30 |
31 | The package relies on two components being present.
32 |
33 | ##### WavyContainer
34 |
35 | This is what houses our wave transition between route changes and does not require any props.
36 |
37 | ##### WavyLink
38 |
39 | This button can be declared anywhere inside your Router component.
40 |
41 | It takes the following props:
42 |
43 | | Prop | Description | Example | type | required | default |
44 | | --------- | ------------------------------------------------------------------------ | ------- | ------------------ | -------- | ------- |
45 | | children | The content inside the link | About | String / Component | true | |
46 | | to | The route that the link will take you to | /about | String | true | |
47 | | color | The background color of the wave shapes. Must be a hexcode or rgba value | #8f44fd | String | false | #8f44fd |
48 | | direction | The direction that the wave shapes will move (options are up/down) | up | String | false | down |
49 | | duration | The duration in milliseconds of the total wave transition | 1200 | Number | false | 1500 |
50 |
51 | Be careful with the duration (too fast/slow can ruin the effect) - my recommended duration is between 1000ms and 1600ms.
52 |
53 | ##### Example App.tsx
54 |
55 | Copy this whole code snippet into your App.tsx for a basic example:
56 |
57 | ```typescript
58 | import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
59 |
60 | import { WavyContainer, WavyLink } from "react-wavy-transitions";
61 |
62 | const Home = () =>
Home
;
63 | const About = () =>
About
;
64 | const Contact = () =>
Contact
;
65 |
66 | function App() {
67 | return (
68 |
69 |
70 |
71 |
75 |
76 | Home
77 |
78 |
79 | About
80 |
81 |
82 | Contact
83 |
84 |
85 |
86 | }
87 | >
88 | } />
89 | } />
90 | } />
91 | No Match} />
92 |
93 |
94 |
95 | );
96 | }
97 |
98 | export default App;
99 | ```
100 |
101 | ### 4. Styling
102 |
103 | To style the WavyLink component you can target it via css (just be more specific than me 😄):
104 |
105 | ```css
106 | body .react-wavy-transitions__wavy-link {
107 | color: #af44fd;
108 | ...;
109 | }
110 | ```
111 |
112 | ### 5. DRY (Don't Repeat Yourself)
113 |
114 | To avoid repeating certain WavyLink props, I recommend creating your own generic link component that sets the props here by default.
115 |
116 | ```typescript
117 | import { FC, ReactNode } from "react";
118 | import { WavyLink } from "react-wavy-transitions";
119 |
120 | type Props = {
121 | to: string;
122 | children: ReactNode;
123 | };
124 |
125 | export const MyWavyLink: FC = ({ to, children }) => (
126 |
127 | {children}
128 |
129 | );
130 | ```
131 |
132 | ### 6. Have fun with it!
133 |
134 | Please hit me up on [My Instagram page](https://instagram.com/frontendjoe) for any support or suggestions 🙂
135 |
--------------------------------------------------------------------------------