piotrski/twizzy-landing

The landing page for Twizzy, built with React 16.7

✉️️ Landing page for Twizzy, a macOS app for Twitter DM.
😎️ Made by @thekitze

🛠️ Setup

It's CRA 2 with customize-cra and react-app-rewired.
The config file is adding/changing the following:

• Add babel-plugin-styled-components
• Add inline-react-svg to inline svg files (I know CRA has this functionality but you import every file in a specific way)
• Disable ESlint 🤷‍♂️️

✅️ Main file

The magic happens in components/App/index.js

🐟️ Custom hooks

All of the hooks are in utils/hooks.js

• useCanHover - detect if the device supports hover, if it doesn't, use onClick for the "tweeting" button
• useToggleBodyClass - toggle a body class based on a boolean. Used to trigger dark/light and scroll/no-scroll classes on the body tag.
• useGoogleAnalytics - inserts a google analytics script, but only when the app is ready
• useMousePosition - track the mouse position. It's used to detect if the user is over the menu bar, otherwise the tweet composer gets glitchy.

I'll move these hooks to react-hanger soon.

⏸️ Suspense and LoadScript

Yeah, yeah, I know we shouldn't use react-cache yet, but YOLO.

I made this LoadScript component to delay the loading of the Paddle script for payments until the page is ready.

• I made a custom component because Suspense wants you to put alternative UI in the fallback prop, and I didn't want an alternative UI, I just wanted the Buy button to be disabled until the script is ready, so I used render props
• When the page is done with loading, it sets startLoading to true and it starts loading the Paddle script.
• Until the script is ready, the Buy button is disabled. The user woulnd't click the button in the first few seconds anyway.
• Credit goes to the-platform for the Script component.

🏝️ Desert background

• I extracted all the logic for the background in a Background component
• For the background I'm using 2 different svg images of a desert, a light one and a dark one.
• I tried using them as background images, but they get all weird for some reason
• They are switched using the DayNightToggle.
• I'm using a desertLoaded boolean to detect when the dark image is completely loaded, and fade it in (otherwise it would look ugly on slow connections)
• I'm waiting until the app is ready to start loading the light image, otherwise it's just slowing down the other requests for no reason

🍬️ Intro animation

• All the animation logic is extracted in this custom hook
• It's using react-pose for the animations
• It's using sequence which is a function that I wrote for scheduling state changes. I also used it for the intro animation of ok-google.io. It goes through the arguments and if it finds a function it calls it, and if it finds a number it's gonna wait with setTimeout for the amount of ms. There is more info in this article.
• It's always enabled in production, but it can be turned off in development using a boolean

🌓️ Day/night switch

It's really nothing fancy, just couple of styled divs. I feel a bit guilty because it's completely inaccessible by keyboard users.

z-index

So, z-index has been driving me crazy for a long time, so I decided to simplify the logic by ordering all elements in an order array and then using ...zIndexFor(ELEMENTS.COMPOSE) in the styles for the component that needs z-index. Smooth.

🖌️ Theming

• The app has a dark and a light mode, and all the logic for them is in styles/themes.js.

• Other components can use the themes either by destructuring the theme prop, or with the following mixins:

• whenTheme - It applies style only when the certain theme name is active. Exapmle: whenTheme('dark', {backgroundColor: 'black})

• applyTheme - It applies certain theme styles to the element. Example: applyTheme('windowBar') will get the theme.windowBar styles from the current theme

• getThemeColor - It reads a certain color from the current theme. Example: getThemeColor('icon') will return the icon color for the current theme.

⁉️ AMA

Just open an issue if you're interested about anything else in the app, and I'll add it in the readme.

🔌️ React 16.7 workshops

All of the materials for the upcoming React Academy workshops are using hooks and Suspense. If your company or conference is interested in a beginner or an advanced workshop just get in touch.