Getting started with React Avatar component

24 May 2022 / 2 minutes to read

This section explains how to create a simple Avatar using Styles in the React Framework

Dependencies

The Avatar Component is pure CSS component so no specific dependencies to render the avatar.

Installation and configuration

You can use Create-react-app to setup the applications. To install create-react-app run the following command.

npm install -g create-react-app

Start a new project using create-react-app command as follows

create-react-app quickstart --scripts-version=react-scripts-ts

cd quickstart

create-react-app quickstart

cd quickstart

Install the below required dependency package in order to use the Avatar component in your application.

npm install @syncfusion/ej2-layouts --save

The Avatar CSS files are available in the ej2-layouts package folder. This can be referenced in your application using the following code.

[src/styles/styles.css]

@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-layouts/styles/material.css';

Adding a simple Avatar

Add the HTML div element with e-avatar class into your index.html.

[src/index.html]

  <div className="e-avatar">AJ</div>

npm start

Output will be as follows:

Source

Preview

App.jsx

index.jsx

index.html

index.css

App.tsx

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
class ReactApp extends React.Component {
    render() {
        return (<div>
        <span className="e-avatar e-avatar-xlarge"></span>
        <span className="e-avatar e-avatar-large"></span>
        <span className="e-avatar"></span>
        <span className="e-avatar e-avatar-small"></span>
        <span className="e-avatar e-avatar-xsmall"></span>
    </div>);
    }
}
ReactDOM.render(<ReactApp />, document.getElementById("element"));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion EJ2 React Avatar Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-layouts/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>
</html>

#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}

#element {
    display: block;
    width: 300px;
    margin: 130px auto;
    border-radius: 3px;
    justify-content: center;
}

.e-avatar {
    background-image: url(https://ej2.syncfusion.com/demos/src/grid/images/2.png);
    margin: 2px;
}

import * as React from "react";
import * as ReactDOM from "react-dom";

class ReactApp extends React.Component<{}, {}> {
  render() {
   return (
    <div>
        <span className="e-avatar e-avatar-xlarge"></span>
        <span className="e-avatar e-avatar-large"></span>
        <span className="e-avatar"></span>
        <span className="e-avatar e-avatar-small"></span>
        <span className="e-avatar e-avatar-xsmall"></span>
    </div>
   );
  }
}
ReactDOM.render(<ReactApp/>, document.getElementById("element"));

Getting started with React Avatar component

Dependencies

Installation and configuration

Adding a simple Avatar

See Also