DEV Community: Augustus Otu

How to create a smooth draggable list with react in 10 mins

Augustus Otu — Sun, 27 Jun 2021 11:43:01 +0000

Welcome to another tutorial!!

Today, we are going to create a draggable list that you can use in your react applications with ease, using framer-motion. If you go to their examples page on codesandbox , you will see this implemented. In case you want to know how you can do it yourself, read on.

To start, if you have a list of items in a container or div that you want to have your users reorder by just dragging one item over another to swap positions, it's not a hustle since you are in the right place. This is what we are going to build in a few minutes.

Now the code, my favorite part!!



import React from 'react';
import './style.css';

const List = [1, 2, 3, 4, 5, 6];

export default function App() {
  return (
    <div className="container">
      {List.map((n, index) => (
        <Item key={index} name={n} />
      ))}
    </div>
  );
}

function Item({ name }) {
  return <div>{name}</div>;
}

This is a normal react app where you are exporting the main component called App. We have another component below that will be the item in the main we will be dragging. A list that we map to produce our six items in the main app.

For now, our item component is just normal div with no properties to make it interactive, we add the framer motion package since that is what we will be using.



yarn add framer-motion //or
npm i framer-motion

When its done doing it magic, we import it into our file and get the motion element from 'framer-motion'. Then change our normal div in the Item component to motion.div, so we have properties we can use to drag and reorder the item when rendered.

Next, we will have to add the properties we want to use;

drag- this will allow us drag our div when rendered in the page. This takes in two types, a boolean and string(x or y). When set to true, we can drag the component in both direction, when set to y we can only drag it up or down and x, left or right. For this tutorial we only want our users dragging it either up or down, so we set it to y.



function Item({ name }) {
  return <motion.div drag="y">{name}</motion.div>;
}

This is what the code looks like now. If you dragged the element, you will realise it goes outside our container that the list rendered in. We don't want that, so we need to add constraints to make sure users can only drag within the container.

dragConstraints - this takes an object of the four sides of the area the item is in, top, bottom, left, right. These accept values as pixels. How far away from the top, bottom, left or right should be the limit, where the component can't be dragged across. If you give it a top of 0, it means the element can only be dragged to the very edge of the top of the parent component, in this case, our container. If you give it a 10, it means it can be dragged up to 10px from the top of the parent component. For our case, we want it to be able to reach the edges and since we are only dragging on the y axis, we only need to take care of the top and bottom.
dragListeners - One thing we also need to take care of is to know when the item is being dragged and when it is dropped after dragging. This will help us be able to reorder the items very well. When dragging the item, we might want to help the users know by performing some form of animation on the item being dragged by either increasing it in size or decreasing it, just to differentiate that from the other items.
layout - We will add this property as well to help us animate the item when dragging as it will be changing position i n the list. Framer motion has done a lot of work for us to have these cool stuff. Read more.
animations - We also might want to add a couple of animations to the item that will be dragged, in our case, we can add the whileHover and whileTap properties or leave it, I ill but you can check the docs later and add. I think the name gives a hint about what each does. When the item is hovered, do this, when the item is tapped or clicked, do that.
controls - We want to add the various functions that will be called to help us reorder our list when it is dragged from one position to the other. They are updateOrder and updatePosition, and we will use the usePositionReOrder and useMeasurePosition hooks. We don't need to rewrite our own.

What usePositionReorder hook does is reorder our list that is rendered when we drag an item from one position to the other and also updates the position of the item given its new position after the drag event. Use measure position uses the ref of the item to determine its position from where it was dragged from and where it has been placed and its index in the list. This is what it uses to send the data to updatePosition from the usePositionReOrder hook. So it will take data from the item being dragged such as its dragoffset vertically, since we are only dragging along the y axis. This will help the hook swap the item that we are changing positions with the dragged item.

When the item is being dragged, aside from letting the component itself know that it is in a dragging state, we have to let our usePositionReOrder hook know, using another property which is the onViewBoxUpdate prop. This property is a callback that will fire every time the viewport is updated due to a drag activity. And it sends the delta of the item and the index to updateOrder from the usePositionReorder hook. The list is reordered and sent back to us in the orderedList and a new list is rendered into our view.

Our code finally looks like this



import React from 'react';
import './style.css';
import { motion } from 'framer-motion';
import { usePositionReorder } from './usePositionReorder';
import { useMeasurePosition } from './useMeasurePosition';

const List = ["Item One", "Item Two", "Item Three", "Item Four"];

export default function App() {
  const [updatedList, updatePosition, updateOrder] = usePositionReorder(List);

  return (
    <ul className="container">
      {updatedList.map((name, index) => (
        <Item
          key={name}
          ind={index}
          updateOrder={updateOrder}
          updatePosition={updatePosition}
          name={name}
        />
      ))}
    </ul>
  );
}

function Item({ name, updateOrder, updatePosition, ind }) {
  const [isdragged, setIsDragged] = React.useState(false);

  const itemRef = useMeasurePosition(pos => updatePosition(ind, pos));

  return (
      <li>
        <motion.div
      style={{
        zIndex: isdragged ? 2 : 1,
        height: name.length * 10
      }}
      dragConstraints={{
        top: 0,
        bottom: 0
      }}
      dragElastic={1}
      layout
      ref={itemRef}
      onDragStart={() => setIsDragged(true)}
      onDragEnd={() => setIsDragged(false)}
      animate={{
        scale: isdragged ? 1.05 : 1
      }}
      onViewportBoxUpdate={(_, delta) => {
       isdragged && updateOrder(ind, delta.y.translate);
      }}
      drag="y">
      {name}
    </motion.div>
        </li>
  );
}

When clicking to drag the items in the list, you will realize they are a bit hard to drag from one end to the other. We can add the dragElastic property of 1 to make it smoother.

Now this is our look

The possibilities are endless, so go ahead and build something with it. A link to the repo to view the entire code and live.
And explore more with framer motion here

Till next time..

Js regex cheatsheet Part 1

Augustus Otu — Thu, 28 May 2020 11:21:03 +0000

Hey there and welcome to this quick tutorial. I woke up to a mail about today being a year's anniversary since joining this awesome community, so I decided to write something in celebration.

This is just a little cheat sheet you can bookmark and check whenever you want to write a regular expression for that awesome program you are writing.

I won't bore you with much info as I assume you already now what regular expressions are. If not, they are patterns that you can use to manipulate text or match character combinations in strings. Read more

Let's dive right in shall we.

When writing regular expressions, we can use a literal like

let kofi = /ama/;

or we can use the constructor like

let kofi  = new RegExp("ama");

Both of these are valid and mean the same thing. So you can use any format.

Note that the pattern used in the constructor is always a string or better yet wrapped in quotes. Also when using literals, if by any case there will be special characters like question marks, plus signs in your pattern you have to make sure a backslash "\" precedes them as they have meanings in regular expressions as you are about to see.

I will be using two methods with regular expressions;

RegExp.test();
RegExp.exec();

RegExp.test() is a method that tests for your pattern and returns either true or false. If it finds your pattern in the given string, it returns true. if not, false.

RegExp.exec() is a method that searches for a match in a string and returns information when it finds the match, as an array and null when it doesn't find a match.

RegExp.test()

For the method test these are the ways you can use it


/**
This finds the exact match in a string. Thus the string must contain "abc" in the exact order or sequence.
**/
/ama/.test("lamal"); //returns true
/ama/.test("almal"); //returns false

/**
This next one lets you find a range of characters in a string and is one of my favourites to use.
**/
/[196]/.test("i was born in 1996"); //returns true

//or

//This means all the numbers from 0-9, thus 0123456789.
/[0-9]/.test("i was born in 1996");  //returns true


//This returns false because there is neither 0,4 nor 3 in the string
/[043]/.test("i was born in 1996"); //returns false

Let's catch a breather here. Remember the special characters I mentioned earlier on? We will get to that real quick but first, let's look at a couple of common shortcuts for writing expressions.

Please take note of these

\d  //returns true if any number is found in a given string "19"
\D //returns true if there aren't any numbers in a string "the"

\w //returns true if any alphanumeric is found in a given string "u2"
\W //returns true if there aren't any alphanumeric in a given string  "(-)"

\s //returns true if there is any whitespace thus space, tab and newline " "
\S //returns true if there is any non-whitespace character "khi "

. //returns true for any character except a new line

A special character like a caret ^ is used for negative matching a range of values. This means if any other value exists in a given string other than the ones it precedes in a pattern, return true.

/[^1996]/.test("199619961996") //returns false

/[^1996]/.test("1996199619967") //returns true because of 7

And now to our special characters

/**
Question marks are used for optional matching, meaning the value they come right after can be present in a given string or not and in this case was the letter "u"
**/
/favou?rite/.test("favourite"); // returns true
/favou?rite/.test("favorite"); //returns true

/**
Plus signs are used to indicate whether the value it comes after will appear once or more times in a given string
**/
/vo+/.test("volvo"); //returns true

/\d+/.test("20019"); //returns true

/\d+/.test("volvo"); //returns false

/\d+/.test(" "); //returns false

/**
A star also does the same as a plus but also returns true when there is no match too
**/

/\d*/.test("volvo"); //returns true


/**
Braces are used to make sure a pattern is represented exactly a number of times. 
It can also be used to specify a range. A good example is when you want to validate dates and time. {3} means the value it comes after must appear exactly 4 times in a given string. 
{1,3} means the value it comes after must be present at least once and at most 3 times. In the example below, the first set means any digit given to represent a day can be either "3" or "30" thus one or two digits as there is only up to 31 days in a month.
 The next means the month can be either "4" or "12" as there is only up to 12 months in a year and the last accepts exactly 4 digits.
**/
/\d{1,2}-\d{1,2}-\d{4}/.test("3-01-1996"); //returns true

That will be it for part one, part two will tackle RegExp.exec() and more advanced regular expressions that will help you build your own expressions with ease. So bye for now, catch you soon on part two. Hope this helped you understand a bit of what you can do with regular expressions.

Comments are welcome😊

How to create an Animated order button with just HTML and css

Augustus Otu — Mon, 20 Apr 2020 21:10:33 +0000

How to build a graphql api from scratch

Augustus Otu — Tue, 28 May 2019 16:04:46 +0000

I have seen a lot of tutorials online about how to build a graphql api and i must say lack one thing, the basics. So what i am going to do here is have this tutorial in two parts. Part 1 will talk about what graphql is and go ahead to setup a simple server with express alongside graphql.

What you will learn in this tutorial isn't solely for javascript folks as i will make sure i take you through the basics and you can go ahead and look at the libraries for other languages and start building on the knowledge acquired here.

Part 2 will be an advanced part where we actually build a full api that we will test with postman and the graphiql interface. At the end of this tutorial i hope you will be able to build your own api for any app you are working on or a new project you would like to start. So lets get started.

Graphql is simply a query language for whichever api you are building. When i say query language i mean, a way of interacting with your api itself and not a database as we used to know it, when we hear about the word "query". If you have been programming for long, i know you have come across query when working with SQl(Standard query language) databases such as MYSQL and POSTGRESQl. We use to query databases with the standard language mentioned above so something like

I guess you remember something like that, now what this allows us to do is select data that we need, when we need it. When retrieving data from the database using SQL we have the flexibility of getting what we need and not more than that. However, if you are familiar with rest apis, you realize that data is given to you usually in a JSON format when you send a GET or POST request to an endpoint. Most of the data the REST api sends won't be used by the client side but bandwidth will be consumed. This one of the things graphql is solving by allowing you to query your api like we did with SQl. Now that you understand how it works, i will take you through the terms you will be mostly using when working with graphql.

When working with graphql, all your request to the single endpoint will be post requests. I know you are wondering how you will just get data like you use to do in the REST architecture. That brings us to the term, Query. Query is used to get data from your api. But what use is an api if you can't also manipulate data on the server side as well, so that brings us to the term, Mutation. Mutation is just like POST, DELETE, PUT in the rest architecture. There are other terms like subscriptions and fragments, but we will be focusing on queries and mutations for the purpose of this tutorial, but feel free to read about them on their page, Learn more about Graphql

Now that you know the terms, let us see some code right away. My favorite part. I assume you know a bit of js and node. If you don't please leave a comment and my next article will take you through the basics of node. First off, we create a server using node and express. You can create a new folder in whichever workspace you are ok with so open your directory or create a new on using cmd

After creating the directory for the app, run "cmd" in the address bar(assuming you are on windows to open the command line in that folder.

Lets start a new project with npm init

Just go with the defaults and in the end, you should have something like this

Afterwards, let us install all the packages we will need, by running the following in that same directory

You can also install the body-parser package to turn our requests into json

Express is the ever popular framework for node, graphql is what we just talked about and express-graphql contains some important modules we will be using to build our server and api and mongoose will help us connect to our mongodb database with ease.

You can then open the newly created project with your favorite IDE and craete a new file named index.js if you went with the defaults of npm init, or whichever file you names as the main in your package.json file. After creating the file we create a simple server in this file with express. Something like

Now you have the express server setup with graphql. Express is being used to start our server and we require graphql http from express graphql to use as a middleware for our api. That is going to handle all the request that goes to the graphql route given. In the graphqlhttp module imported, we are going to give the options with which graphql is going to work with. Some of them are the schema, which will let graphql know how we are going to query our data and how we want our data to be like. Another option is also the root value that will take all our resolvers thats the functions that will allow us create and manipulate data in graphql. Another useful option is the "graphiql" which will give us the ability to interact with our api using an interface when we navigate to the "graphql" route in our browser. So let us add the options now

In the above gist, we can see the schema and graphiql options added to our code now. The schema is required to have graphql run successfully, because that is the only way graphql will understand our request to the api we are about to build. So i created a function called defineSchema which basically defines our schema. In the schema, we have "buildSchema" which was imported from the graphql package. this is what will build our schema using the string we give it.

MainQuery is a GraphQL Object Type that has a field named library. the library field is of Strings, which means only strings will be in that field and the exclamation mark after it means, it is not nullable. So whenever we query our api for library an empty array will come to show that it is empty or an array of strings will be given by the api based on what that field has.

There is also a getlibrary function that gets the books in the library, for now it is just an array because we haven't connected a database yet. The name of the schema in your queries should match the name of the function keys in your rootValue, this will help graphql know what you want and get you exactly that. So the more schema types we add to the queries the more mtaching functions we add to the rootValue. Schema defines the data, rootValue gets us the data.

So if you start your server using node and navigate to the graphql route, you should see this simple interface that will allow you to interact with the api you just created. For now, it doesn't do much, but i hope you understand how it works. This should be what you see at your "/graphql" route

Now lets query our new graphql api now and get the books in our library using the GraphQL schema language.

From this query and curly braces the next level is the name as stated in our rootValue, thats the function to get the data. If you enter the code in your new graphql explorer, you should have the getlibrary function called and books returned as the data. So using the same route, we can state another schema and root value and query it with ease, thats the power of graphql. I hope you enjoyed this tutorial and learnt something today. Will continue with the next part where we actually build a fully functioning api, where we store and retrieve data from our mongodb database. See you in the next post. Connect with me on twitter @AugustusOtu with any questions or comment here for any explanations. Share to your circles.

Happy coding....Bye for now

Which should be my next post? Topics 👇

Augustus Otu — Mon, 27 May 2019 22:48:25 +0000

How to easily accept stripe payments in node
How to setup a graphql server
How to connect sockets to your node app
How to setup your express app and solve most errors you are to face.
How to connect a react app with a node backend.

You can comment the topics you want me to write about. Let's go

How to write a promise in javascript

Augustus Otu — Mon, 27 May 2019 17:25:15 +0000

Hello and welcome to my post. I am going to teach you how to write a promise. First, why should you use promises in your code? The answer is simple, and that is, it helps you wait for the response of an action before going on to perform another action. I know you want to see the code so here you go.

It is as simple as you see. Now you can go ahead and have promises in your code.
You can connect with me on twitter. Thank you and happy coding