Search results

Getting started with React Skeleton component

02 Feb 2023 / 2 minutes to read

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

Dependencies

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

Copied to clipboard
|-- @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.

Copied to clipboard
npm install -g create-react-app

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

Copied to clipboard
create-react-app quickstart --scripts-version=react-scripts-ts

cd quickstart
Copied to clipboard
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

Copied to clipboard
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.

Copied to clipboard
@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.

Copied to clipboard
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'));
Copied to clipboard
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:

Copied to clipboard
npm start

The following example shows a basic Skeleton component.

Source
Preview
index.jsx
index.html
index.css
index.tsx
Copied to clipboard
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'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2 React Skeleton Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-notifications/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <link rel="stylesheet" href="index.css" />
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div></div>
</body>
</html>
Copied to clipboard
#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}
Copied to clipboard
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'));