Search results

Getting started with React Avatar component

03 Dec 2021 / 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.

Copied to clipboard
npm install -g create-react-app

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

Copied to clipboard
create-react-app quickstart --scripts-version=react-scripts-ts

cd quickstart
Copied to clipboard
create-react-app quickstart

cd quickstart

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

Copied to clipboard
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]

Copied to clipboard
@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]

Copied to clipboard
  <div className="e-avatar">AJ</div>
Copied to clipboard
npm start

Output will be as follows:

Source
Preview
App.tsx
index.tsx
index.html
index.css
App.jsx
index.jsx
Copied to clipboard
Copied to clipboard
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"));
Copied to clipboard
<!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/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>
Copied to clipboard
#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;
}
Copied to clipboard
Copied to clipboard
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"));

See Also

Types of Avatar