Getting Started

30 Jan 20232 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

```bash create-react-app quickstart --scripts-version=react-scripts-ts cd quickstart ```
```bash 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:

import * as React from "react";
import * as ReactDOM from "react-dom";
function ReactApp() {
    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>);
}
export default ReactApp;
ReactDOM.render(<ReactApp />, document.getElementById("element"));
import * as React from "react";
import * as ReactDOM from "react-dom";

function ReactApp() {
  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>
  );
}
export default ReactApp;
ReactDOM.render(<ReactApp/>, document.getElementById("element"));

See Also

Types of Avatar