Getting Started

16 Mar 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.

      ```bash
       npm install -g create-react-app
      ```

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

<div class='tsx'>

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

<div class='jsx'>

```
create-react-app quickstart
cd quickstart
```

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

  ```bash
  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