Getting Started

27 Nov 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

To set-up a React application in TypeScript environment, run the following command.

npx create-react-app my-app --template typescript

cd my-app

npm start

To set-up a React application in JavaScript environment, run the following command.

npx create-react-app my-app

cd my-app

npm start

Adding Syncfusion packages

All the available Essential JS 2 packages are published in npmjs.com public registry.

To install Avatar component, use the following command

npm install @syncfusion/ej2-layouts --save

Adding CSS Reference

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

src/App.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 App.tsx.

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

Run the application

Run the application in the browser using the following command:

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