
This is a simple and effective way to create an add to cart animated button in Ionic React with **Ionic Animations** which uses the Web Animations API.

If you're not familiar with either of these, I would definitely take a look at the [official Ionic Animations docs](https://ionicframework.com/docs/utilities/animations) and even have a read about the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) as well before we get started.

The example that I'm going to take you through today is to add a nice visual effect to our mobile application to make it seem as if a _cart_ icon on an **Add to Cart** button is floating upwards.

There are some benefits of including something like this into an app such as a [E-Commerce App](/ionic-react-ecommerce) or a [Food Ordering App](/ionic-fast-food-ordering-app);
* Immediately informs the user of interaction
* Visual aid that the item/product has been added to cart
* Improves the user experience (UX)

You could also take the technique and idea used in this example and apply it elsewhere for other effects.

## CreateAnimation Component
For this example, we will be using the **CreateAnimation** component. This is a wrapper-style component imported from `@ionic/react` and it allows us to wrap another component/element in the animation to apply that animation to it.

```jsx
import { CreateAnimation } from '@ionic/react';
```
### Properties
This component takes in props in order to build up the style, type and options for the animation. You can see all of the available methods and props [here](https://ionicframework.com/docs/utilities/animations#methods). Today, as part of this example, we are going to focus on a few specific properties;

- `duration(duration?: number)`
	- Set the duration of the animation in milliseconds.
- `iterations(iterations: number)`
	- Set the number of times the animation cycle should be played before stopping.
- `fromTo(property: string, fromValue: any, toValue: any)`
	- Set the start and end styles of the animation. The property being the CSS property, e.g. *translate* or *color*.
-	`easing(easing?: string)`
	-	Set the easing of the animation in milliseconds. See  [Easing Effects](https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/easing#Value) from the Web Animations API docs for a list of accepted easing values.

We will also be making use of the `play()` method which is used to *Play the animation*.

### Other ways

There are other ways to use **Ionic Animations** in Ionic React other than using this wrapper component. However, I will only cover this way in this post. If wanted, you can refer to the docs to see the programmatic approach of attaching an animation to an element and using the `createAnimation` and `addAnimation` methods. In my experience and my own opinion though, this is a very clean, effective way of adding animations using Ionic Animations.

## Getting started
So now that we've covered the **CreateAnimation** component and the properties it accepts as well as a brief overview of the properties we are going to focus on, let's get started.

### Other components needed
As we are creating a button to "Add to Cart", there are two other obvious components we will need to import into our application, these are the **IonButton** and **IonIcon**.

```jsx
import { CreateAnimation, IonButton, IonIcon } from '@ionic/react';
```
### Icon needed
We can easily import a nice icon from the [Ionicons](https://ionic.io/ionicons) icon library. To keep in context with our example, we can use the **Cart** icon.

```jsx
import { cartOutline } from "ionicons/icons";
```

### Hooks needed
We will also make use of **React Hooks** for this implementation to minimise javascript code and to make our code a lot cleaner and efficient, these are the **useRef** and **useState** hooks.
```jsx
import { useRef, useState } from 'react';
```

The `useState` hook will be used to control the display property of the animated icon and the `useRef` hook we will use to *reference the animation component*.

### Setting everything up
We have everything we need imported now to start into our component. We will be using a functional component in this case, and in my opinion is the best practice. As we are creating a specific button for this use case, we need to give the user the ability to specify a custom click or a callback for after the animation has happened, such as *the actual add to cart* functionality.

```jsx
const AddToCartButton = ({ customOnClick = null }) => {

	const animationRef = useRef();
	const [ hidden, setHidden ] = useState(true);
```
We've now got our component set up with a prop being passed in called **customOnClick**. This will represent the further functionality that will be executed *after* the animation as well as the ref and state variables.

### Building our animations
With the CreateAnimation wrapper component, we can either specify the properties outlined above directly as props on this component, or define them inside our functional component and later pass them in. In my opinion the latter is cleaner as it gives you more oversight over everything.

First, we need a style to append on to our animated icon, let's call this **floatStyle** and set it's position and display CSS properties.
```jsx
const floatStyle = {

	display: hidden ? "none" : "",
	position: "absolute"
};
```
Next, we will start defining and building our animations with options using the properties I talked about above. We are going to add 2 animations to our icon.

I have split the two animations out into their own objects so it's easier to understand what's going on here, but we merge them later in the **fromTo** property as you'll see.

In this **floatGrowAnimation** we are manipulating the `transform` CSS property of this element and changing the `translateY` and `scale` values. This will essentially make our icon move upwards and get slightly bigger.
```jsx
const floatGrowAnimation = {

	property: "transform",
	fromValue: "translateY(0) scale(1)",
	toValue: "translateY(-55px) scale(1.2)"
};
```
This **colorAnimation** is going to change our icon from white to the primary Ionic **CSS variable color**.
```jsx
const colorAnimation = {

	property: "color",
	fromValue: "white",
	toValue: "var(--ion-color-primary"
};
```
Now, we can create our main animation object specifying a **duration** of 700 milliseconds, 1 iteration, set our easing option and house the 2 animation **fromTo** objects in the **fromTo** array.
```jsx
const mainAnimation = {

	duration: 700,
	iterations: "1",
	fromTo: [ floatGrowAnimation, colorAnimation ],
	easing: "cubic-bezier(0.25, 0.7, 0.25, 0.7)"
};
```
### Click event handler
We also need a function which handles our click event of the main button we are going to build. This function will take care of the icon display property using the state variable, play the animation and execute the **customOnClick** function that was passed in as a prop if there is any.

```jsx
const handleClick = async () => {

	setHidden(false);
	await animationRef.current.animation.play();
	setHidden(true);
	customOnClick && customOnClick();
}
```
So, we're achieving a few things here;
1. We set the state variable **hidden** to **false**.
2. Using the `play()` method, we can call it on the animation of the current element attached to our **animationRef** (which you'll see below in our return).
3. Hide the icon again, so it's ready for the next animation.
4. Execute the **customOnClick** function is there is one.

### Return (rendered components)
This is our final return method with our components.
```jsx
return (
<div className="button-container">
	<IonButton color="primary" className="custom-button" onClick={ handleClick }>
		<IonIcon icon={ cartOutline } />
	</IonButton>

	<CreateAnimation ref={ animationRef } { ...mainAnimation }>
		<IonIcon icon={ cartOutline } size="large" style={ floatStyle } />
	</CreateAnimation>
</div>
);
```
Wrapped in the **CreateAnimation** component is a second **IonIcon** component which will serve as our animated icon, outside of the button, to make it appear as if it's floating and animating away from the button. We've spread our **mainAnimation** object passing it's properties as props.

And that's pretty much it! You'll see I've applied some custom classes above to the containing div and the button, feel free to play around with your own, depending on your preference or you can check out the Github repo below for my implementation!

[Here is a link to my implementation of this specific component in an Ionic App.](/ionic-react-add-to-cart)

![Add to cart implementation](https://strapi.alanmontgomery.co.uk/uploads/Add_To_Cart_dfb28fca39.png)

If this has helped you understand Ionic Animations a little bit, or the CreateAnimation component, or if you've implemented this add to cart button into your own app then let me know! **Feel free to leave a comment below or reach out on Twitter**.

I look forward to the next one 🎉.


Today I want to teach you how you can achieve routing programmatically in Ionic with React. There are a few different ways it can be done, but there's one way that should definitely be utilised, especially in the day and era we live in with `hooks` and the functionality we're provided with out-of-the-box by Ionic!

I've found it hard in the past, along my journey to come across docs and resources in one place detailing these miniscule, specific use cases, and I want to start creating valuable, short pieces of information to help you on your Ionic React journey too, all in one place!

💥 Let's get started.

## useIonRouter hook
This is a `React hook` that comes baked into the Ionic Framework by default. It gives us as developers more direct control over routing in an Ionic React applicaiton. 

All we need to do is import it;

```js
import { useIonRouter } from "@ionic/react";
```
Now, because this is a hook, we need to obey by the rule of hooks in React. What's that?
> You must only call hooks inside inside a function. Never inside a loop, or other conditional statement etc and always at the top level.

Just think of it like your standard local `useState` hook call within a component that you're probably already familiar with.

## Initializing the hook
Lets say we have a component called `Page1.js` and at the top of this functional component we can initialize our hook like so;

```js
import { useIonRouter } from "@ionic/react";

export const Page1 = () => {

	const router = useIonRouter();
}
```

## Methods of the useIonRouter hook
We have access to a few very useful built-in methods we can use to navigate through our app, these are;
1. `goBack()`
This method will navigate backwards in history, using the IonRouter to determine history. It accepts one argument for an optional custom transition if wanted 
	- `animationBuilder?: AnimationBuilder`- ***Optional** - A custom transition animation to use*

2. `push()`
This method allows us to push a route into the history of the router. This also accepts a few additional arguments to pass to the method. These are;
	- `pathname: string` 
		- *The path to navigate to* - e.g. `/page2`.

	- `routerDirection?: RouterDirection` 
		- ***Optional** - The RouterDirection to use for transition purposes, defaults to 'forward', can also be 'back', 'none' and 'root'.*

	- `routeAction?: RouteAction`
		- ***Optional** - The RouteAction to use for history purposes, defaults to 'push', but can also be 'pop' and 'replace'.*

	- `routerOptions?: RouterOptions`
		- ***Optional** - Any additional parameters to pass to the route.*
	
	- `animationBuilder?: AnimationBuilder`
		- ***Optional** - A custom transition animation to use.*
3. `canGoBack()`
Determines if there are any additional routes in the the Router's history. However, routing is not prevented if the browser's history has more entries. Returns true if more entries exist, false if not.

4. `routeInfo()`
This method will return some information about the *current* route.

Now let's see how we can implement this in a real piece of code, following on from earlier in the post;

**NOTE**
> Let's assume that all routes and pages/tabs and main `IonApp` is already set up and working. This is simply a demonstration of how to use the router from within a component/page.

```jsx
import { useIonRouter } from "@ionic/react";

export const Page1 = () => {
	
	//	Initializing our router
	const router = useIonRouter();
	
	//	A simple, hard-coded navigation
	const simpleNavigate = () => {
		
		router.push("/page2", "forward", "push");
	}
	
	//	A more usable, dynamic navigate function
	//	Passing in the path and direction
	//	Working out the action based on direction
	const dynamicNavigate = (path, direction) => {
		
		const action = direction === "forward" ? "push" : "pop";
		router.push(path, direction, action);
	}
	
	//	Checking if we can go back
	//	Before calling the goBack() method
	const navigateBack = () => {
		
		if (router.canGoBack()) {
			
			router.goBack();
		}
		//	 else...
	}
	
	return (
		<IonPage>
			<IonContent>
				
				//	Calling a function which calls the push method
				<IonButton color="primary" onClick={ simpleNavigate }>
					Go to Page 2
				</IonButton>
				
				//	Calling a function which calls the push method
				//	But is dynamic, and we have control
				<IonButton color="primary" onClick={ () => dynamicNavigate("/page3", "forward") }>
					Go to X
				</IonButton>
				
				//	Calling a method of the router directly
				<IonButton color="secondary" onClick={ () => router.goBack() }>
					Go Back
				</IonButton>
			</IonContent>
		</IonPage>
	);
}
```
Awesome, right? That's pretty much it! You can see how easy Ionic have made it for us with this `useIonRouter` hook, however sometimes having a little context is good!

I really hope you enjoyed this little tutorial on routing programmatically in Ionic React! Be sure to sign up below to receive emails about new posts like these directly and all future content!

Let me know what you think via [Twitter](https://twitter.com/93alan), you can share using the Twitter button below!

See you in the next one 👋


# First of all, welcome!

If you follow me on <a href="https://twitter.com/93alan" target="_blank">Twitter</a>, then you'll know that I've recently been re-writing Ionic React Hub! There wasn't anything wrong with how it was working before hand, but I wanted to make it more of a platform/hub rather than just a page containing the UI Examples!

Now what you'll find here is the UI/Examples as you know them. I didn't want to change this part too much as I quite liked the simplicity. However, a few changes in that, they now have their own dedicated page which you can find at `/ui-examples`. Also on the homepage you'll see a few of the *latest* ones, as well as under a single post view. Pretty neat, right?

## Tech Stack

### NextJS / React
On to the fun stuff now after a short intro... The tech stack! What did I use to build this site? Well, I love modern web tech! I always have! The main tech stack here is `NextJS` for the front-end and utilising the awesome *api routes* to hook into some back-endy `node` code when needed! Each page is built statically with incremental re-generation, which is all built into Next, if you're familiar with it, then this will make total sense!

### StrapiJS
For the actual UI/Examples that I post on here, they are actually being fetched from a DB. Keeping with the fun, fresh modern web tech - I went with `StrapiJS`. This is a headless CMS which is spun up and served on my personal **Digtial Ocean** server and connected to a `PostgreSQL` database. I could have used MongoDB for this, but I had it already set up to use PSQL from the first site, so, no point re-inventing the wheel really. Using NextJS, I can easily build dynamic pages for each post using the `[slug].js` file name in conjunction with **getStaticProps**/**getStaticPaths**. With the incremental builds, it means that when I add a new record to my DB with my new UI Example, then a new corresponding page will be statically generated.

```js
export async function getStaticProps() {
    
	const response = await fetch(`${ process.env.API_URL }/posts`);
    var data = await response.json();
	data = parseImages(data);

	return { props: { posts }, revalidate: 1 }
}
```

### TailwindCSS
For the styling across the whole site I've used **TailwindCSS**. This is a utility first CSS framework that allows us as developers to style our content using class names only. Now, I'm a huge fan of custom CSS and SASS modules, as you know or *will* know from my UI Examples, however Tailwind is just way too easy to use, especially with React/NextJS!

```html
<h1 className="tracking-tighter font-bold text-2xl text-white bg-blue-500 p-2 m-2">Hello World!</h1>
```

### Blog (Custom)
I didn't want to just do the standard thing and implement a blogging plugin or use a third party platform. Nowadays, with the tools and web tech readily available to us, it's very easy to build these ourselves. For the blog section, I have went with simple Markdown with some plugins to style and look after the formatting; **Prism**, **Remark**, **Gray Matter** and **Markdown**. All I have to do is write a blog post inside a `.md` file and save it inside my posts folder and my setup will take care of the rest! It results in this very page you're reading now.

Here's some context around the plugins which is actually lifted from NextJS' blog itself, but it explains it exactly how I would;

<a href="https://prismjs.com/" target="_blank">Prism</a> is a popular syntax highlighter commonly used with Markdown. This example shows how to use Prism with <a href="https://nextjs.org/" target="_blank">NextJS</a>.

With NextJS you can **write server-side code directly** inside some special functions. For example, you can read Markdown files from the filesystem (`fs`) – including parsing front matter with <a href="https://github.com/jonschlinkert/gray-matter" target="_blank">gray-matter</a>. For example, let's assume you have a Markdown file located at `posts/my-post.md`.

We can retrieve that file's contents using `getPostBySlug('my-post')`.

```js
import fs from 'fs';
import { join } from 'path';
import matter from 'gray-matter';

export function getPostBySlug(slug) {
  
  const realSlug = slug.replace(/\.md$/, '');
  const fullPath = join(docsDirectory, `${realSlug}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');
  const { data, content } = matter(fileContents);

  const time = readTime(content);
  data.readTime = time;

  return { slug: realSlug, meta: data, content };
}
```

Then, we can **transform** the raw Markdown into HTML using <a href="https://github.com/remarkjs/remark" target="_blank">remark</a> plugins.


```js
import remark from 'remark';
import html from 'remark-html';
import prism from 'remark-prism';

export default async function markdownToHtml(markdown) {
  const result = await remark().use(html).use(prism).process(markdown);
  return result.toString();
}
```

Passing the `content` returned by `getPostBySlug('my-post')` into `markdownToHtml(content)`
would convert a Markdown file like this:

````markdown
---
title: 'My First Post'
description: 'My very first blog post'
---

# My First Post

I **love** using [Next.js](https://nextjs.org/)

```js
const doc = getDocBySlug(params.slug);
```
````

into this HTML, which includes the proper elements and class names.

```html
<h1>My First Post</h1>
<p>I <strong>love</strong> using <a href="https://nextjs.org/">Next.js</a></p>
<div class="remark-highlight">
  <pre class="language-js">
    <code>
      <span class="token keyword">const</span> doc <span class="token operator">=</span> <span class="token function">getDocBySlug</span><span class="token punctuation">(</span>params<span class="token punctuation">.</span><span class="token property-access">slug</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    </code>
  </pre>
</div>
```

I've also created my own function to work out an estimated `read time` for each post. This is a simple calculation based on some average reading speeds and word counts.

### Other note-worthy things
I've included some other cool things as part of this site as well. You'll see the share button to Twitter and the copy link at the end of this post, which again is a custom function to just open a window with the correct URL to share to Twitter.

For all of the Social Meta data like social sharing images, and titles/descriptions etc, I've utilised NextJS' `Head` tag and created a custom component which dynamically gets fed data for each page meaning I don't need to do anything!

If you sign up to my mailing list, you'll see some magic happen as well, which is a plugin called `react-......` - I'm not gonna tell you! That would ruin the surprise!!

There's some other things, but I've covered pretty much the main core bits of tech used!

##### Thank you
Well hopefully you enjoyed this first blog post as part of `Ionic React Hub`! Future posts will include **tutorials** specific to Ionic and React for building slick mobile apps, mobile app development, CapacitorJS and more! Be sure to sign up to be notified of new content using your email - I'll also be sending out early access to all new premium content in the future to email subscribers!

Ionic React Hub

Hey there, I'm Alan! I want to help you build slick mobile apps with Ionic React

Level up your Ionic React skills. I'll send you handpicked tutorials, examples & resources

Latest UI/Examples

Onboarding UI →

Add To Cart →

Profile Dashboard UI →

Drawing Canvas App →

Latest Blog Posts

Animations

Using Ionic Animations to create an add to cart animated button in Ionic React

Routing

Routing, programmatically in Ionic React

General

How I built this website and blog