Getting Started

2 Nov 20233 minutes to read

This section explains how to create a simple Skeleton, and configure its available functionalities in React.

To get started quickly with the React Skeleton component, you can check out this video.

Dependencies

The following list of dependencies are required to use the Skeleton component in your application.

|-- @syncfusion/ej2-react-notifications
    |-- @syncfusion/ej2-react-base
    |-- @syncfusion/ej2-notifications
      |-- @syncfusion/ej2-base

Setup your development environment

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

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

cd quickstart
create-react-app quickstart

cd quickstart

‘react-scripts-ts’ is used for creating React app with typescript.

Adding Syncfusion packages

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

To install Skeleton component, use the following command

npm install @syncfusion/ej2-react-notifications --save

The above command installs Skeleton dependencies
which are required to render the component in the React environment.

Adding style sheet to the Application

Add Skeleton component’s styles as given below in App.css.

@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";

Add Skeleton to the Application

Now, you can create Skeleton component in the application. Add Skeleton component in src/App.tsx file using the following code snippet.

import { SkeletonComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
import * as ReactDOM from 'react-dom';

function App() {
    return (
        <SkeletonComponent height='15px'></SkeletonComponent>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

Run the application

Run the application in the browser using the following command:

npm start

The following example shows a basic Skeleton component.

import { SkeletonComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
import * as ReactDOM from 'react-dom';
function App() {
    return (<SkeletonComponent height='15px'></SkeletonComponent>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import { SkeletonComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
import * as ReactDOM from 'react-dom';

function App() {

  return (
    <SkeletonComponent height='15px'></SkeletonComponent>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));