{"id":27745,"date":"2022-02-16T17:18:53","date_gmt":"2022-02-16T17:18:53","guid":{"rendered":"http:\/\/Display-Floating-Avatars-for-Event-Attendees"},"modified":"2022-02-16T17:18:53","modified_gmt":"2022-02-16T17:18:53","slug":"display-floating-avatars-for-event-attendees","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/display-floating-avatars-for-event-attendees\/","title":{"rendered":"Display Floating Avatars for Event Attendees"},"content":{"rendered":"

I recall registering for one of the previous editions of the Next.js conference and seeing animation on the landing page with participants\u2019 avatars joyously floating around.<\/p>\n

In this article, we will recreate that animation using anime.js<\/a> and React. A registration form will be displayed when the website loads. This form will contain four elements: an input field for the user\u2019s name, a button for uploading an avatar, a checkbox that the user selects to indicate whether or not the avatar should be displayed on the page, and a submit button.<\/p>\n

Cloudinary will handle image uploads and display. You will need a Cloudinary account so create one here<\/a> if you do not already have one. We will use antd<\/a> for UI components in our application.<\/p>\n

Here is a link<\/a> to the demo CodeSandbox.<\/p>\n<\/div>\n \n

\n <\/iframe>\n <\/div>\n\n

Project Setup<\/h2>\n

Create a new React app using the following command:<\/p>\n

    npx create-react-app floating_avatars\n<\/code><\/span><\/pre>\n
Next, add the project dependencies using the following command:<\/p>\n
    npm<\/span> install<\/span> animejs<\/span> antd<\/span> @ant-design<\/span>\/icons cloudinary-react axios\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Next, we need to import the CSS for antd. To do this, add the following to the App.css<\/code> file in your src<\/code> directory:<\/p>\n
    @import<\/span> \"~antd\/dist\/antd.css\"<\/span>;\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
    REACT_APP_CLOUD_NAME = YOUR CLOUD NAME HERE\n    REACT_APP_UPLOAD_PRESET = YOUR UNSIGNED UPLOAD PRESET KEY HERE\n<\/code><\/span><\/pre>\n
This will be used as a default when the project is set up on another system. To update your local environment, create a copy of the .env<\/code> file using the following command:<\/p>\n
    cp<\/span> .env<\/span> .env<\/span>.local<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
By default, this local file is added to .gitignore<\/code> and mitigates the security risk of inadvertently exposing secret credentials to the public. You can update .env.local<\/code> with your Cloudinary cloud name and generated upload preset.<\/p>\n
Next, create a file named cloudinaryConfig.js<\/code> in your src<\/code> folder. This file will access the environment variables and prevent repeated process.env.<\/code> calls throughout the project. Add the following to your cloudinaryConfig.js<\/code> file:<\/p>\n
    export<\/span> const<\/span> cloudName = process.env.REACT_APP_CLOUD_NAME;\n    export<\/span> const<\/span> uploadPreset = process.env.REACT_APP_UPLOAD_PRESET;\n    export<\/span> const<\/span> uploadTag = \"floating_avatar_registration\"<\/span>;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In addition, we declared a constant named uploadTag<\/code>. This will be attached to the uploaded images with the user\u2019s permission to display in the floating avatars.<\/p>\n
Create Helper Class for API Requests<\/h2>\n
To help with requests to the Cloudinary API, create a new file called api.js<\/code> and add the following to it:<\/p>\n
    import<\/span> axios from<\/span> \"axios\"<\/span>;\n    import<\/span> { cloudName, uploadPreset, uploadTag } from<\/span> \".\/cloudinaryConfig\"<\/span>;\n    export<\/span> const<\/span> getAvatarResources = ({ successCallback }<\/span>) =><\/span> {\n      axios\n        .get(`https:\/\/res.cloudinary.com\/${cloudName}<\/span>\/image\/list\/${uploadTag}<\/span>.json`<\/span>)\n        .then((response<\/span>) =><\/span> successCallback(response.data.resources));\n    };\n    export<\/span> const<\/span> uploadFile = ({ file, successCallback, addTag }<\/span>) =><\/span> {\n      const<\/span> url = `https:\/\/api.cloudinary.com\/v1_1\/${cloudName}<\/span>\/image\/upload`<\/span>;\n      const<\/span> data = new<\/span> FormData();\n      data.append(\"file\"<\/span>, file);\n      data.append(\"upload_preset\"<\/span>, uploadPreset);\n      if<\/span> (addTag) {\n        data.append(\"tags\"<\/span>, uploadTag);\n      }\n      axios\n        .post(url, data, {\n          headers<\/span>: {\n            \"Content-Type\"<\/span>: \"multipart\/form-data\"<\/span>,\n          },\n        })\n        .then((response<\/span>) =><\/span> successCallback(response.data));\n    };\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The uploadFile<\/code> function uploads the selected avatar to Cloudinary. With the selected file, a boolean flag named addTag<\/code> and a callback function in the event of a successful upload, the uploadFile<\/code> function makes a POST request to Cloudinary, providing the file and the upload preset we defined earlier. If the value of  addTag<\/code> is set to true, a tag is attached to the request to include the avatar in the animation(s) on the index page.<\/p>\n
Create Avatar Selector component<\/h2>\n
Create a new folder called components<\/code> in your src<\/code> directory. In the src\/components<\/code> directory, create a new file called AvatarSelector.js<\/code> and add the following to it:<\/p>\n
    import<\/span> { Button, Upload } from<\/span> \"antd\"<\/span>;\n    import<\/span> { UploadOutlined } from<\/span> \"@ant-design\/icons\"<\/span>;\n    const<\/span> AvatarSelector = ({ setUploadedFile, isUploading }<\/span>) =><\/span> {\n      const<\/span> props = {\n        name<\/span>: \"file\"<\/span>,\n        onRemove<\/span>: ()<\/span> =><\/span> {\n          setUploadedFile(null<\/span>);\n        },\n        beforeUpload<\/span>: (file<\/span>) =><\/span> {\n          setUploadedFile(file);\n          return<\/span> false<\/span>;\n        },\n        showUploadList<\/span>: false<\/span>,\n        maxCount<\/span>: 1<\/span>,\n      };\n      return<\/span> (\n        <Upload<\/span> {...props<\/span>}><\/span>\n          <Button<\/span> icon<\/span>={<\/span><UploadOutlined<\/span> \/><\/span>} loading={isUploading}>\n            Click to Upload\n          <\/Button<\/span>><\/span>\n        <\/Upload<\/span>><\/span><\/span>\n      );\n    };\n    export<\/span> default<\/span> AvatarSelector;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The AvatarSelector component takes two props:<\/p>\n
    \n
  1. \nsetUploadedFile<\/code> – this callback function is used to update the application state with the latest image uploaded by the user.<\/li>\n
  2. \nisUploading<\/code> – This flag is used to set the status of the upload button. If this value is true<\/code>, it indicates that the currently selected image is being uploaded to Cloudinary.<\/li>\n<\/ol>\n
    By returning false<\/code> in the beforeUpload<\/code> method, we disable the Upload<\/code> component\u2019s default behavior, which uploads the selected file to a provided URL. We also restrict the maximum number of files to 1.<\/p>\n
    Create Floating Avatar component<\/h2>\n
    In your src\/component<\/code> folder, create a new file called FloatingAvatars.js<\/code> and add the following to it:<\/p>\n
        import<\/span> { useEffect, useRef } from<\/span> \"react\"<\/span>;\n    import<\/span> anime from<\/span> \"animejs\"<\/span>;\n    import<\/span> { cloudName, uploadPreset } from<\/span> \"..\/util\/cloudinaryConfig\"<\/span>;\n    import<\/span> { Image, Transformation } from<\/span> \"cloudinary-react\"<\/span>;\n    const<\/span> FloatingAvatars = ({ avatars }<\/span>) =><\/span> {\n      const<\/span> refs = useRef([]);\n      const<\/span> windowHeight = window<\/span>.innerHeight;\n      const<\/span> windowWidth = window<\/span>.innerWidth;\n      const<\/span> animation = ()<\/span> =><\/span> {\n        anime({\n          targets<\/span>: refs.current,\n          translateY<\/span>: ()<\/span> =><\/span> anime.random(0<\/span>, windowHeight \/ 2<\/span>),\n          translateX<\/span>: ()<\/span> =><\/span> anime.random(0<\/span>, windowWidth \/ 2<\/span>),\n          easing<\/span>: \"easeInOutSine\"<\/span>,\n          duration<\/span>: 5000<\/span>,\n          loop<\/span>: true<\/span>,\n          direction<\/span>: \"alternate\"<\/span>,\n          complete<\/span>: animation,\n        });\n      };\n      useEffect(()<\/span> =><\/span> {\n        animation();\n      });\n      const<\/span> getRandomNumber = (min, max<\/span>) =><\/span> Math<\/span>.random() * (max - min) + min;\n      const<\/span> randomTop = ()<\/span> =><\/span> getRandomNumber(0<\/span>, windowHeight \/ 2<\/span>);\n      const<\/span> randomLeft = ()<\/span> =><\/span> getRandomNumber(0<\/span>, windowWidth \/ 2<\/span>);\n      return<\/span> avatars.map((avatar, index<\/span>) =><\/span> (\n        <div<\/span>\n          key<\/span>={index}<\/span>\n          ref<\/span>={(el)<\/span> =><\/span> (refs.current[index] = el)}\n          style={{\n            position: \"absolute\",\n            top: `${randomTop()}px`,\n            left: `${randomLeft()}px`,\n          }}\n        >\n          <Image<\/span>\n            publicId<\/span>={<\/span>`${avatar.public_id<\/span>}.png<\/span>`}\n            cloudName<\/span>={cloudName}<\/span>\n            upload_preset<\/span>={uploadPreset}<\/span>\n            secure<\/span>={true}<\/span>\n          ><\/span>\n            <Transformation<\/span> width<\/span>={50}<\/span> height<\/span>={50}<\/span> gravity<\/span>=\"face\"<\/span> crop<\/span>=\"thumb\"<\/span> \/><\/span>\n            <Transformation<\/span> radius<\/span>=\"max\"<\/span> \/><\/span>\n            <Transformation<\/span> effect<\/span>=\"trim\"<\/span> \/><\/span>\n          <\/Image<\/span>><\/span>\n        <\/div<\/span>><\/span><\/span>\n      ));\n    };\n    export<\/span> default<\/span> FloatingAvatars;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    This component takes a list of Cloudinary image resources, renders them in random positions, and applies the specified animation. The Image<\/code> and Transformation<\/code> components from the Cloudinary-react package are used to dynamically generate a 50px by 50px rounded image focusing on the face. The image is also automatically converted to png format as specified, allowing the trimmed section\u2019s background to be transparent (instead of white).<\/p>\n
    The animation function targets the rendered images and animates them along a random course. This is done by generating random values for the translateX and translateY properties of the anime<\/code> function.<\/p>\n
    Putting It All Together<\/h2>\n
    Update your src\/App.js<\/code> with the following:<\/p>\n
        import<\/span> \".\/App.css\"<\/span>;\n    import<\/span> { Button, Card, Checkbox, Col, Form, Input, message } from<\/span> \"antd\"<\/span>;\n    import<\/span> AvatarSelector from<\/span> \".\/components\/AvatarSelector\"<\/span>;\n    import<\/span> { useEffect, useState } from<\/span> \"react\"<\/span>;\n    import<\/span> FloatingAvatars from<\/span> \".\/components\/FloatingAvatar\"<\/span>;\n    import<\/span> { getAvatarResources, uploadFile } from<\/span> \".\/utils\/api\"<\/span>;\n    function<\/span> App<\/span>(<\/span>) <\/span>{\n      const<\/span> [avatars, setAvatars] = useState([]);\n      const<\/span> [uploadedFile, setUploadedFile] = useState(null<\/span>);\n      const<\/span> [isUploading, setIsUploading] = useState(false<\/span>);\n      useEffect(()<\/span> =><\/span> {\n        getAvatarResources({ successCallback<\/span>: setAvatars });\n      }, []);\n      const<\/span> onFinish = (values<\/span>) =><\/span> {\n        setIsUploading(true<\/span>);\n        const<\/span> showUploadedAvatar = values.showAvatar || false<\/span>;\n        uploadFile({\n          file<\/span>: uploadedFile,\n          successCallback<\/span>: (data<\/span>) =><\/span> {\n            setIsUploading(false<\/span>);\n            if<\/span> (showUploadedAvatar) {\n              setAvatars((oldAvatars<\/span>) =><\/span> [...oldAvatars, data]);\n            }\n            message.success(`Welcome ${values.username}<\/span>!!!`<\/span>);\n          },\n          addTag<\/span>: showUploadedAvatar,\n        });\n      };\n      const<\/span> onFailedSubmission = (errorInfo<\/span>) =><\/span> {\n        console<\/span>.log(\"Failed:\"<\/span>, errorInfo);\n      };\n      return<\/span> (\n        <div<\/span> className<\/span>=\"App\"<\/span> style<\/span>={{<\/span> margin:<\/span> \"5<\/span>%\" }}><\/span>\n          <Card<\/span> style<\/span>={{<\/span> margin:<\/span> \"auto<\/span>\", width:<\/span> \"50<\/span>%\" }}><\/span>\n            <Form<\/span>\n              onFinish<\/span>={onFinish}<\/span>\n              onFinishFailed<\/span>={onFailedSubmission}<\/span>\n              autoComplete<\/span>=\"off\"<\/span>\n            ><\/span>\n              <Form.Item<\/span>\n                label<\/span>=\"Username\"<\/span>\n                name<\/span>=\"username\"<\/span>\n                rules<\/span>={[<\/span>\n                  {\n                    required:<\/span> true<\/span>,\n                    message:<\/span> \"Please<\/span> input<\/span> your<\/span> username<\/span>\",\n                  },\n                ]}\n              ><\/span>\n                <Input<\/span> \/><\/span>\n              <\/Form.Item<\/span>><\/span>\n              <Col<\/span> span<\/span>={16}<\/span> offset<\/span>={9}<\/span>><\/span>\n                <AvatarSelector<\/span> setUploadedFile<\/span>={setUploadedFile}<\/span> \/><\/span>\n              <\/Col<\/span>><\/span>\n              <Form.Item<\/span>\n                name<\/span>=\"showAvatar\"<\/span>\n                valuePropName<\/span>=\"checked\"<\/span>\n                wrapperCol<\/span>={{<\/span> offset:<\/span> 9<\/span>, span:<\/span> 16<\/span> }}\n              ><\/span>\n                <Checkbox<\/span>><\/span>Show my avatar<\/Checkbox<\/span>><\/span>\n              <\/Form.Item<\/span>><\/span>\n              <Form.Item<\/span> wrapperCol<\/span>={{<\/span> offset:<\/span> 10<\/span>, span:<\/span> 16<\/span> }}><\/span>\n                <Button<\/span> type<\/span>=\"primary\"<\/span> htmlType<\/span>=\"submit\"<\/span> loading<\/span>={isUploading}<\/span>><\/span>\n                  Submit\n                <\/Button<\/span>><\/span>\n              <\/Form.Item<\/span>><\/span>\n            <\/Form<\/span>><\/span>\n          <\/Card<\/span>><\/span>\n          <FloatingAvatars<\/span> avatars<\/span>={avatars}<\/span> \/><\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    }\n    export<\/span> default<\/span> App;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    In this component, we create three state variables:<\/p>\n
In the getAvatarResources<\/code> function, we use the Client-side asset lists feature to retrieve the list of images with our set tag. To ensure that this feature is available on your Cloudinary account, you must ensure that the Resource list option is enabled<\/a>. By default, the list delivery type is restricted.<\/p>\n
Next, we need to create some environment variables to hold our Cloudinary details. We will be sending images to Cloudinary via unsigned POST requests for this tutorial. To do this, we need our account cloud name and an unsinged upload preset<\/a>. Create a new file called .env<\/code> at the root of your project and add the following to it:<\/p>\n