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 withe-avatar
class into yourindex.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"));