Hoang Ha

Hoang Ha

1655853300

Tạo ProgressBar và ProgressSpinner bằng PrimeReact / Primefaces

Khung giao diện người dùng PRIMEREACT có hơn 80 Thành phần giao diện người dùng phản ứng với chất lượng hàng đầu để giúp bạn thực hiện tất cả các yêu cầu giao diện người dùng của mình theo phong cách.

Các thành phần PrimeReact có thể dễ dàng sử dụng / tích hợp với ProgressBar và ProgressSpinner. Trong ví dụ này, một bảng thanh ghi được mô phỏng bằng cách sử dụng ProgressBar và ProgressSpinner.

Điều kiện tiên quyết

  • Javascript
  • Kiến thức cơ bản về React js
  • Node.js
  • Mã VS, Visual Studio

Chúng tôi đề cập đến những điều dưới đây,

  • Tạo ứng dụng React
  • Cài đặt Primeface
  • ProgressBar và ProgressSpinner trong React js

Bước 1

Chạy lệnh dưới đây để tạo React js

npx create-react-app prime-app
cd prime-app
npm start

Bước 2

Chạy lệnh dưới đây để cài đặt PrimeReact

npm install primereact primeicons

Tạo các tệp theo hình ảnh dưới đây

Bước 3

Thêm mã bên dưới vào App.js

import React, { useState, useEffect, useRef } from 'react';
import { ProgressBar } from 'primereact/progressbar';
import { Toast } from 'primereact/toast';
import { ProgressSpinner } from 'primereact/progressspinner';

function App() {
    const [value1, setValue1] = useState(0);
    const toast = useRef(null);
    const interval = useRef(null);
    const displayValueTemplate = (value) => {
        return (
            <React.Fragment>
                {value}/<b>100</b>
            </React.Fragment>
        );
    }
    useEffect(() => {
        let val = value1;
        interval.current = setInterval(() => {
            val += Math.floor(Math.random() * 10) + 1;
            if (val >= 100) {
                val = 100;
                toast.current.show({ severity: 'info', summary: 'Success', detail: 'Process Completed' });
                clearInterval(interval.current);
            }
            setValue1(val);
        }, 2000);

        return () => {
            if (interval.current) {
                clearInterval(interval.current);
                interval.current = null;
            }
        }
    }, []); // eslint-disable-line react-hooks/exhaustive-deps

    return (
        <div>
            <Toast ref={toast}></Toast>
            <div className="card">
                <h5>Dynamic</h5>
                <ProgressBar value={value1}></ProgressBar>
                <h5>Static</h5>
                <ProgressBar value={50}></ProgressBar>
                <h5>Custom display value</h5>
                <ProgressBar value={40} displayValueTemplate={displayValueTemplate}></ProgressBar>
                <h5>Indeterminate</h5>
                <ProgressBar mode="indeterminate" style={{ height: '6px' }}></ProgressBar>
            </div>
            <div>
            <div className="card">
                <h5>Basic</h5>
                <ProgressSpinner />
                <h5>Custom</h5>
                <ProgressSpinner style={{width: '50px', height: '50px'}} strokeWidth="8" fill="var(--surface-ground)" animationDuration=".5s"/>
            </div>
        </div>
        </div>
    );
}
export default App;

Bước 4

Thêm mã bên dưới vào index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <!-- PrimeReact -->
    <link rel="stylesheet" href="https://unpkg.com/primeicons/primeicons.css" />
    <link rel="stylesheet" href="https://unpkg.com/primereact/resources/themes/lara-light-indigo/theme.css" />
    <link rel="stylesheet" href="https://unpkg.com/primereact/resources/primereact.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/primeflex@3.1.2/primeflex.min.css" />

    <!-- Dependencies -->
    <script src="https://unpkg.com/react/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://unpkg.com/react-transition-group@4.4.2/dist/react-transition-group.js"></script>

    <!-- Demo -->
    <script src="https://unpkg.com/primereact/core/core.min.js"></script>
    <script src="https://unpkg.com/primereact/splitter/splitter.min.js"></script>
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Bước 5

Thêm mã dưới đây vào App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Bước 6

Thêm mã dưới đây vào contires.json

[{
    "name": "Afghanistan",
    "code": "AF"
}, {
    "name": "Åland Islands",
    "code": "AX"
}, {
    "name": "Albania",
    "code": "AL"
}, {
    "name": "Algeria",
    "code": "DZ"
}, {
    "name": "American Samoa",
    "code": "AS"
}, {
    "name": "Andorra",
    "code": "AD"
}, {
    "name": "Angola",
    "code": "AO"
}, {
    "name": "Anguilla",
    "code": "AI"
}, {
    "name": "Antarctica",
    "code": "AQ"
}, {
    "name": "Antigua and Barbuda",
    "code": "AG"
}, {
    "name": "Argentina",
    "code": "AR"
}, {
    "name": "Armenia",
    "code": "AM"
}, {
    "name": "Aruba",
    "code": "AW"
}, {
    "name": "Uruguay",
    "code": "UY"
}, {
    "name": "Uzbekistan",
    "code": "UZ"
}, {
    "name": "Vanuatu",
    "code": "VU"
}, {
    "name": "Venezuela",
    "code": "VE"
}, {
    "name": "Viet Nam",
    "code": "VN"
}, {
    "name": "Virgin Islands, British",
    "code": "VG"
}, {
    "name": "Virgin Islands, U.S.",
    "code": "VI"
}, {
    "name": "Wallis and Futuna",
    "code": "WF"
}, {
    "name": "Western Sahara",
    "code": "EH"
}, {
    "name": "Yemen",
    "code": "YE"
}, {
    "name": "Zambia",
    "code": "ZM"
}, {
    "name": "Zimbabwe",
    "code": "ZW"
}]

Bước 7

Thêm mã sau vào package.json

{
  "name": "prime-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "primeicons": "^5.0.0",
    "primereact": "^8.1.1",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-redux": "^8.0.2",
    "react-scripts": "^2.1.3",
    "redux": "^4.2.0",
    "web-vitals": "^2.1.4",
    "primeflex": "^3.1.0",
    "react-transition-group": "^4.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Bước 8

Chạy các lệnh sau

npm i
npm start

Bước 9

Cách tạo ProgressBar và ProgressSpinner bằng PrimeReact / Primefaces trong ReactJS

Bản tóm tắt

Trong bài viết này, chúng ta đã học cách tạo dự án phản ứng, thiết lập giao diện người dùng PrimeReact và tạo các thành phần giao diện người dùng React js ProgressBar, ProgressSpinner và PrimeReact UI.

Nguồn: https://www.c-sharpcorner.com/article/how-to-create-progressbar-and-progressspinner-using-primereactprimefaces-in-rea/

#primereact  #primefaces #react 

What is GEEK

Buddha Community

Tạo ProgressBar và ProgressSpinner bằng PrimeReact / Primefaces
Hoang Ha

Hoang Ha

1655853300

Tạo ProgressBar và ProgressSpinner bằng PrimeReact / Primefaces

Khung giao diện người dùng PRIMEREACT có hơn 80 Thành phần giao diện người dùng phản ứng với chất lượng hàng đầu để giúp bạn thực hiện tất cả các yêu cầu giao diện người dùng của mình theo phong cách.

Các thành phần PrimeReact có thể dễ dàng sử dụng / tích hợp với ProgressBar và ProgressSpinner. Trong ví dụ này, một bảng thanh ghi được mô phỏng bằng cách sử dụng ProgressBar và ProgressSpinner.

Điều kiện tiên quyết

  • Javascript
  • Kiến thức cơ bản về React js
  • Node.js
  • Mã VS, Visual Studio

Chúng tôi đề cập đến những điều dưới đây,

  • Tạo ứng dụng React
  • Cài đặt Primeface
  • ProgressBar và ProgressSpinner trong React js

Bước 1

Chạy lệnh dưới đây để tạo React js

npx create-react-app prime-app
cd prime-app
npm start

Bước 2

Chạy lệnh dưới đây để cài đặt PrimeReact

npm install primereact primeicons

Tạo các tệp theo hình ảnh dưới đây

Bước 3

Thêm mã bên dưới vào App.js

import React, { useState, useEffect, useRef } from 'react';
import { ProgressBar } from 'primereact/progressbar';
import { Toast } from 'primereact/toast';
import { ProgressSpinner } from 'primereact/progressspinner';

function App() {
    const [value1, setValue1] = useState(0);
    const toast = useRef(null);
    const interval = useRef(null);
    const displayValueTemplate = (value) => {
        return (
            <React.Fragment>
                {value}/<b>100</b>
            </React.Fragment>
        );
    }
    useEffect(() => {
        let val = value1;
        interval.current = setInterval(() => {
            val += Math.floor(Math.random() * 10) + 1;
            if (val >= 100) {
                val = 100;
                toast.current.show({ severity: 'info', summary: 'Success', detail: 'Process Completed' });
                clearInterval(interval.current);
            }
            setValue1(val);
        }, 2000);

        return () => {
            if (interval.current) {
                clearInterval(interval.current);
                interval.current = null;
            }
        }
    }, []); // eslint-disable-line react-hooks/exhaustive-deps

    return (
        <div>
            <Toast ref={toast}></Toast>
            <div className="card">
                <h5>Dynamic</h5>
                <ProgressBar value={value1}></ProgressBar>
                <h5>Static</h5>
                <ProgressBar value={50}></ProgressBar>
                <h5>Custom display value</h5>
                <ProgressBar value={40} displayValueTemplate={displayValueTemplate}></ProgressBar>
                <h5>Indeterminate</h5>
                <ProgressBar mode="indeterminate" style={{ height: '6px' }}></ProgressBar>
            </div>
            <div>
            <div className="card">
                <h5>Basic</h5>
                <ProgressSpinner />
                <h5>Custom</h5>
                <ProgressSpinner style={{width: '50px', height: '50px'}} strokeWidth="8" fill="var(--surface-ground)" animationDuration=".5s"/>
            </div>
        </div>
        </div>
    );
}
export default App;

Bước 4

Thêm mã bên dưới vào index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <!-- PrimeReact -->
    <link rel="stylesheet" href="https://unpkg.com/primeicons/primeicons.css" />
    <link rel="stylesheet" href="https://unpkg.com/primereact/resources/themes/lara-light-indigo/theme.css" />
    <link rel="stylesheet" href="https://unpkg.com/primereact/resources/primereact.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/primeflex@3.1.2/primeflex.min.css" />

    <!-- Dependencies -->
    <script src="https://unpkg.com/react/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://unpkg.com/react-transition-group@4.4.2/dist/react-transition-group.js"></script>

    <!-- Demo -->
    <script src="https://unpkg.com/primereact/core/core.min.js"></script>
    <script src="https://unpkg.com/primereact/splitter/splitter.min.js"></script>
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Bước 5

Thêm mã dưới đây vào App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Bước 6

Thêm mã dưới đây vào contires.json

[{
    "name": "Afghanistan",
    "code": "AF"
}, {
    "name": "Åland Islands",
    "code": "AX"
}, {
    "name": "Albania",
    "code": "AL"
}, {
    "name": "Algeria",
    "code": "DZ"
}, {
    "name": "American Samoa",
    "code": "AS"
}, {
    "name": "Andorra",
    "code": "AD"
}, {
    "name": "Angola",
    "code": "AO"
}, {
    "name": "Anguilla",
    "code": "AI"
}, {
    "name": "Antarctica",
    "code": "AQ"
}, {
    "name": "Antigua and Barbuda",
    "code": "AG"
}, {
    "name": "Argentina",
    "code": "AR"
}, {
    "name": "Armenia",
    "code": "AM"
}, {
    "name": "Aruba",
    "code": "AW"
}, {
    "name": "Uruguay",
    "code": "UY"
}, {
    "name": "Uzbekistan",
    "code": "UZ"
}, {
    "name": "Vanuatu",
    "code": "VU"
}, {
    "name": "Venezuela",
    "code": "VE"
}, {
    "name": "Viet Nam",
    "code": "VN"
}, {
    "name": "Virgin Islands, British",
    "code": "VG"
}, {
    "name": "Virgin Islands, U.S.",
    "code": "VI"
}, {
    "name": "Wallis and Futuna",
    "code": "WF"
}, {
    "name": "Western Sahara",
    "code": "EH"
}, {
    "name": "Yemen",
    "code": "YE"
}, {
    "name": "Zambia",
    "code": "ZM"
}, {
    "name": "Zimbabwe",
    "code": "ZW"
}]

Bước 7

Thêm mã sau vào package.json

{
  "name": "prime-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "primeicons": "^5.0.0",
    "primereact": "^8.1.1",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-redux": "^8.0.2",
    "react-scripts": "^2.1.3",
    "redux": "^4.2.0",
    "web-vitals": "^2.1.4",
    "primeflex": "^3.1.0",
    "react-transition-group": "^4.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Bước 8

Chạy các lệnh sau

npm i
npm start

Bước 9

Cách tạo ProgressBar và ProgressSpinner bằng PrimeReact / Primefaces trong ReactJS

Bản tóm tắt

Trong bài viết này, chúng ta đã học cách tạo dự án phản ứng, thiết lập giao diện người dùng PrimeReact và tạo các thành phần giao diện người dùng React js ProgressBar, ProgressSpinner và PrimeReact UI.

Nguồn: https://www.c-sharpcorner.com/article/how-to-create-progressbar-and-progressspinner-using-primereactprimefaces-in-rea/

#primereact  #primefaces #react 

Adolphus Tillman

Adolphus Tillman

1655880300

Create ProgressBar And ProgressSpinner Using PrimeReact/Primefaces

PRIMEREACT UI framework that has Over 80 React UI Components with top-notch quality to help you implement all your UI requirements in style.

PrimeReact components can be easily used/integrated with ProgressBar and ProgressSpinner. In this example, a register panel is simulated using ProgressBar and ProgressSpinner.

Preconditions

  • Javascript
  • Basic knowledge of React js
  • Node.js
  • V.S. Code,Visual Studio

We cover the below things,

  • Create React application
  • Installation of Primeface
  • ProgressBar and ProgressSpinner in React js

Step 1

Run the below command to create React js

npx create-react-app prime-app
cd prime-app
npm start

Step 2

Run the below command  for installing PrimeReact

npm install primereact primeicons

Create the files according to the below image

Step 3

Add the below code in the App.js

import React, { useState, useEffect, useRef } from 'react';
import { ProgressBar } from 'primereact/progressbar';
import { Toast } from 'primereact/toast';
import { ProgressSpinner } from 'primereact/progressspinner';

function App() {
    const [value1, setValue1] = useState(0);
    const toast = useRef(null);
    const interval = useRef(null);
    const displayValueTemplate = (value) => {
        return (
            <React.Fragment>
                {value}/<b>100</b>
            </React.Fragment>
        );
    }
    useEffect(() => {
        let val = value1;
        interval.current = setInterval(() => {
            val += Math.floor(Math.random() * 10) + 1;
            if (val >= 100) {
                val = 100;
                toast.current.show({ severity: 'info', summary: 'Success', detail: 'Process Completed' });
                clearInterval(interval.current);
            }
            setValue1(val);
        }, 2000);

        return () => {
            if (interval.current) {
                clearInterval(interval.current);
                interval.current = null;
            }
        }
    }, []); // eslint-disable-line react-hooks/exhaustive-deps

    return (
        <div>
            <Toast ref={toast}></Toast>
            <div className="card">
                <h5>Dynamic</h5>
                <ProgressBar value={value1}></ProgressBar>
                <h5>Static</h5>
                <ProgressBar value={50}></ProgressBar>
                <h5>Custom display value</h5>
                <ProgressBar value={40} displayValueTemplate={displayValueTemplate}></ProgressBar>
                <h5>Indeterminate</h5>
                <ProgressBar mode="indeterminate" style={{ height: '6px' }}></ProgressBar>
            </div>
            <div>
            <div className="card">
                <h5>Basic</h5>
                <ProgressSpinner />
                <h5>Custom</h5>
                <ProgressSpinner style={{width: '50px', height: '50px'}} strokeWidth="8" fill="var(--surface-ground)" animationDuration=".5s"/>
            </div>
        </div>
        </div>
    );
}
export default App;

Step 4

Add the below code in index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <!-- PrimeReact -->
    <link rel="stylesheet" href="https://unpkg.com/primeicons/primeicons.css" />
    <link rel="stylesheet" href="https://unpkg.com/primereact/resources/themes/lara-light-indigo/theme.css" />
    <link rel="stylesheet" href="https://unpkg.com/primereact/resources/primereact.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/primeflex@3.1.2/primeflex.min.css" />

    <!-- Dependencies -->
    <script src="https://unpkg.com/react/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://unpkg.com/react-transition-group@4.4.2/dist/react-transition-group.js"></script>

    <!-- Demo -->
    <script src="https://unpkg.com/primereact/core/core.min.js"></script>
    <script src="https://unpkg.com/primereact/splitter/splitter.min.js"></script>
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Step 5

Add the below code in App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Step 6

Add the below code in the contires.json

[{
    "name": "Afghanistan",
    "code": "AF"
}, {
    "name": "Åland Islands",
    "code": "AX"
}, {
    "name": "Albania",
    "code": "AL"
}, {
    "name": "Algeria",
    "code": "DZ"
}, {
    "name": "American Samoa",
    "code": "AS"
}, {
    "name": "Andorra",
    "code": "AD"
}, {
    "name": "Angola",
    "code": "AO"
}, {
    "name": "Anguilla",
    "code": "AI"
}, {
    "name": "Antarctica",
    "code": "AQ"
}, {
    "name": "Antigua and Barbuda",
    "code": "AG"
}, {
    "name": "Argentina",
    "code": "AR"
}, {
    "name": "Armenia",
    "code": "AM"
}, {
    "name": "Aruba",
    "code": "AW"
}, {
    "name": "Uruguay",
    "code": "UY"
}, {
    "name": "Uzbekistan",
    "code": "UZ"
}, {
    "name": "Vanuatu",
    "code": "VU"
}, {
    "name": "Venezuela",
    "code": "VE"
}, {
    "name": "Viet Nam",
    "code": "VN"
}, {
    "name": "Virgin Islands, British",
    "code": "VG"
}, {
    "name": "Virgin Islands, U.S.",
    "code": "VI"
}, {
    "name": "Wallis and Futuna",
    "code": "WF"
}, {
    "name": "Western Sahara",
    "code": "EH"
}, {
    "name": "Yemen",
    "code": "YE"
}, {
    "name": "Zambia",
    "code": "ZM"
}, {
    "name": "Zimbabwe",
    "code": "ZW"
}]

Step 7

Add the following code in package.json

{
  "name": "prime-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "primeicons": "^5.0.0",
    "primereact": "^8.1.1",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-redux": "^8.0.2",
    "react-scripts": "^2.1.3",
    "redux": "^4.2.0",
    "web-vitals": "^2.1.4",
    "primeflex": "^3.1.0",
    "react-transition-group": "^4.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Step 8

Run the following commands

npm i
npm start

Step 9

How To Create ProgressBar and ProgressSpinner Using PrimeReact/Primefaces In ReactJS

Summary

In this article, we learned how to create react project, set PrimeReact UI, and create React js ProgressBar, ProgressSpinner and PrimeReact UI components.

Source: https://www.c-sharpcorner.com/article/how-to-create-progressbar-and-progressspinner-using-primereactprimefaces-in-rea/

#primereact  #primefaces #react 

郝 玉华

郝 玉华

1655852640

使用 PrimeReact/Primefaces 创建 ProgressBar 和 ProgressSpinner

PRIMEREACT UI 框架包含 80 多个具有一流质量的 React UI 组件，可帮助您以风格实现所有 UI 要求。

PrimeReact 组件可以很容易地与 ProgressBar 和 ProgressSpinner 一起使用/集成。在此示例中，使用 ProgressBar 和 ProgressSpinner 模拟了一个寄存器面板。

前提条件

  • Javascript
  • React js的基础知识
  • 节点.js
  • VS 代码，Visual Studio

我们涵盖以下内容，

  • 创建 React 应用程序
  • Primeface 的安装
  • React js 中的 ProgressBar 和 ProgressSpinner

步骤1

运行以下命令来创建 React js

npx create-react-app prime-app
cd prime-app
npm start

第2步

运行以下命令安装 PrimeReact

npm install primereact primeicons

根据下图创建文件

第 3 步

在 App.js 中添加以下代码

import React, { useState, useEffect, useRef } from 'react';
import { ProgressBar } from 'primereact/progressbar';
import { Toast } from 'primereact/toast';
import { ProgressSpinner } from 'primereact/progressspinner';

function App() {
    const [value1, setValue1] = useState(0);
    const toast = useRef(null);
    const interval = useRef(null);
    const displayValueTemplate = (value) => {
        return (
            <React.Fragment>
                {value}/<b>100</b>
            </React.Fragment>
        );
    }
    useEffect(() => {
        let val = value1;
        interval.current = setInterval(() => {
            val += Math.floor(Math.random() * 10) + 1;
            if (val >= 100) {
                val = 100;
                toast.current.show({ severity: 'info', summary: 'Success', detail: 'Process Completed' });
                clearInterval(interval.current);
            }
            setValue1(val);
        }, 2000);

        return () => {
            if (interval.current) {
                clearInterval(interval.current);
                interval.current = null;
            }
        }
    }, []); // eslint-disable-line react-hooks/exhaustive-deps

    return (
        <div>
            <Toast ref={toast}></Toast>
            <div className="card">
                <h5>Dynamic</h5>
                <ProgressBar value={value1}></ProgressBar>
                <h5>Static</h5>
                <ProgressBar value={50}></ProgressBar>
                <h5>Custom display value</h5>
                <ProgressBar value={40} displayValueTemplate={displayValueTemplate}></ProgressBar>
                <h5>Indeterminate</h5>
                <ProgressBar mode="indeterminate" style={{ height: '6px' }}></ProgressBar>
            </div>
            <div>
            <div className="card">
                <h5>Basic</h5>
                <ProgressSpinner />
                <h5>Custom</h5>
                <ProgressSpinner style={{width: '50px', height: '50px'}} strokeWidth="8" fill="var(--surface-ground)" animationDuration=".5s"/>
            </div>
        </div>
        </div>
    );
}
export default App;

第4步

在 index.html 中添加以下代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <!-- PrimeReact -->
    <link rel="stylesheet" href="https://unpkg.com/primeicons/primeicons.css" />
    <link rel="stylesheet" href="https://unpkg.com/primereact/resources/themes/lara-light-indigo/theme.css" />
    <link rel="stylesheet" href="https://unpkg.com/primereact/resources/primereact.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/primeflex@3.1.2/primeflex.min.css" />

    <!-- Dependencies -->
    <script src="https://unpkg.com/react/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://unpkg.com/react-transition-group@4.4.2/dist/react-transition-group.js"></script>

    <!-- Demo -->
    <script src="https://unpkg.com/primereact/core/core.min.js"></script>
    <script src="https://unpkg.com/primereact/splitter/splitter.min.js"></script>
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

第 5 步

在 App.css 中添加以下代码

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

第 6 步

在 contires.json 中添加以下代码

[{
    "name": "Afghanistan",
    "code": "AF"
}, {
    "name": "Åland Islands",
    "code": "AX"
}, {
    "name": "Albania",
    "code": "AL"
}, {
    "name": "Algeria",
    "code": "DZ"
}, {
    "name": "American Samoa",
    "code": "AS"
}, {
    "name": "Andorra",
    "code": "AD"
}, {
    "name": "Angola",
    "code": "AO"
}, {
    "name": "Anguilla",
    "code": "AI"
}, {
    "name": "Antarctica",
    "code": "AQ"
}, {
    "name": "Antigua and Barbuda",
    "code": "AG"
}, {
    "name": "Argentina",
    "code": "AR"
}, {
    "name": "Armenia",
    "code": "AM"
}, {
    "name": "Aruba",
    "code": "AW"
}, {
    "name": "Uruguay",
    "code": "UY"
}, {
    "name": "Uzbekistan",
    "code": "UZ"
}, {
    "name": "Vanuatu",
    "code": "VU"
}, {
    "name": "Venezuela",
    "code": "VE"
}, {
    "name": "Viet Nam",
    "code": "VN"
}, {
    "name": "Virgin Islands, British",
    "code": "VG"
}, {
    "name": "Virgin Islands, U.S.",
    "code": "VI"
}, {
    "name": "Wallis and Futuna",
    "code": "WF"
}, {
    "name": "Western Sahara",
    "code": "EH"
}, {
    "name": "Yemen",
    "code": "YE"
}, {
    "name": "Zambia",
    "code": "ZM"
}, {
    "name": "Zimbabwe",
    "code": "ZW"
}]

第 7 步

在 package.json 中添加以下代码

{
  "name": "prime-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "primeicons": "^5.0.0",
    "primereact": "^8.1.1",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-redux": "^8.0.2",
    "react-scripts": "^2.1.3",
    "redux": "^4.2.0",
    "web-vitals": "^2.1.4",
    "primeflex": "^3.1.0",
    "react-transition-group": "^4.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

第 8 步

运行以下命令

npm i
npm start

第 9 步

如何在 ReactJS 中使用 PrimeReact/Primefaces 创建 ProgressBar 和 ProgressSpinner

概括

在本文中，我们学习了如何创建 React 项目，设置 PrimeReact UI，以及创建 React js ProgressBar、ProgressSpinner 和 PrimeReact UI 组件。

资料来源：https ://www.c-sharpcorner.com/article/how-to-create-progressbar-and-progressspinner-using-primereactprimefaces-in-rea/

#primereact  #primefaces #react 

Rui Silva

Rui Silva

1655854800

Crie ProgressBar E ProgressSpinner Usando PrimeReact/Primefaces

Estrutura de interface do usuário PRIMEREACT que possui mais de 80 componentes de interface do usuário do React com qualidade de alto nível para ajudá-lo a implementar todos os seus requisitos de interface do usuário com estilo.

Os componentes PrimeReact podem ser facilmente usados/integrados com ProgressBar e ProgressSpinner. Neste exemplo, um painel de registro é simulado usando ProgressBar e ProgressSpinner.

Pré-condições

  • Javascript
  • Conhecimento básico de React js
  • Node.js
  • Código VS, Visual Studio

Cobrimos as coisas abaixo,

  • Criar aplicativo React
  • Instalação do Primeface
  • ProgressBar e ProgressSpinner em React js

Passo 1

Execute o comando abaixo para criar o React js

npx create-react-app prime-app
cd prime-app
npm start

Passo 2

Execute o comando abaixo para instalar o PrimeReact

npm install primereact primeicons

Crie os arquivos de acordo com a imagem abaixo

etapa 3

Adicione o código abaixo no App.js

import React, { useState, useEffect, useRef } from 'react';
import { ProgressBar } from 'primereact/progressbar';
import { Toast } from 'primereact/toast';
import { ProgressSpinner } from 'primereact/progressspinner';

function App() {
    const [value1, setValue1] = useState(0);
    const toast = useRef(null);
    const interval = useRef(null);
    const displayValueTemplate = (value) => {
        return (
            <React.Fragment>
                {value}/<b>100</b>
            </React.Fragment>
        );
    }
    useEffect(() => {
        let val = value1;
        interval.current = setInterval(() => {
            val += Math.floor(Math.random() * 10) + 1;
            if (val >= 100) {
                val = 100;
                toast.current.show({ severity: 'info', summary: 'Success', detail: 'Process Completed' });
                clearInterval(interval.current);
            }
            setValue1(val);
        }, 2000);

        return () => {
            if (interval.current) {
                clearInterval(interval.current);
                interval.current = null;
            }
        }
    }, []); // eslint-disable-line react-hooks/exhaustive-deps

    return (
        <div>
            <Toast ref={toast}></Toast>
            <div className="card">
                <h5>Dynamic</h5>
                <ProgressBar value={value1}></ProgressBar>
                <h5>Static</h5>
                <ProgressBar value={50}></ProgressBar>
                <h5>Custom display value</h5>
                <ProgressBar value={40} displayValueTemplate={displayValueTemplate}></ProgressBar>
                <h5>Indeterminate</h5>
                <ProgressBar mode="indeterminate" style={{ height: '6px' }}></ProgressBar>
            </div>
            <div>
            <div className="card">
                <h5>Basic</h5>
                <ProgressSpinner />
                <h5>Custom</h5>
                <ProgressSpinner style={{width: '50px', height: '50px'}} strokeWidth="8" fill="var(--surface-ground)" animationDuration=".5s"/>
            </div>
        </div>
        </div>
    );
}
export default App;

Passo 4

Adicione o código abaixo em index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <!-- PrimeReact -->
    <link rel="stylesheet" href="https://unpkg.com/primeicons/primeicons.css" />
    <link rel="stylesheet" href="https://unpkg.com/primereact/resources/themes/lara-light-indigo/theme.css" />
    <link rel="stylesheet" href="https://unpkg.com/primereact/resources/primereact.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/primeflex@3.1.2/primeflex.min.css" />

    <!-- Dependencies -->
    <script src="https://unpkg.com/react/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://unpkg.com/react-transition-group@4.4.2/dist/react-transition-group.js"></script>

    <!-- Demo -->
    <script src="https://unpkg.com/primereact/core/core.min.js"></script>
    <script src="https://unpkg.com/primereact/splitter/splitter.min.js"></script>
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Etapa 5

Adicione o código abaixo no App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Etapa 6

Adicione o código abaixo no contires.json

[{
    "name": "Afghanistan",
    "code": "AF"
}, {
    "name": "Åland Islands",
    "code": "AX"
}, {
    "name": "Albania",
    "code": "AL"
}, {
    "name": "Algeria",
    "code": "DZ"
}, {
    "name": "American Samoa",
    "code": "AS"
}, {
    "name": "Andorra",
    "code": "AD"
}, {
    "name": "Angola",
    "code": "AO"
}, {
    "name": "Anguilla",
    "code": "AI"
}, {
    "name": "Antarctica",
    "code": "AQ"
}, {
    "name": "Antigua and Barbuda",
    "code": "AG"
}, {
    "name": "Argentina",
    "code": "AR"
}, {
    "name": "Armenia",
    "code": "AM"
}, {
    "name": "Aruba",
    "code": "AW"
}, {
    "name": "Uruguay",
    "code": "UY"
}, {
    "name": "Uzbekistan",
    "code": "UZ"
}, {
    "name": "Vanuatu",
    "code": "VU"
}, {
    "name": "Venezuela",
    "code": "VE"
}, {
    "name": "Viet Nam",
    "code": "VN"
}, {
    "name": "Virgin Islands, British",
    "code": "VG"
}, {
    "name": "Virgin Islands, U.S.",
    "code": "VI"
}, {
    "name": "Wallis and Futuna",
    "code": "WF"
}, {
    "name": "Western Sahara",
    "code": "EH"
}, {
    "name": "Yemen",
    "code": "YE"
}, {
    "name": "Zambia",
    "code": "ZM"
}, {
    "name": "Zimbabwe",
    "code": "ZW"
}]

Etapa 7

Adicione o seguinte código em package.json

{
  "name": "prime-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "primeicons": "^5.0.0",
    "primereact": "^8.1.1",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-redux": "^8.0.2",
    "react-scripts": "^2.1.3",
    "redux": "^4.2.0",
    "web-vitals": "^2.1.4",
    "primeflex": "^3.1.0",
    "react-transition-group": "^4.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Etapa 8

Execute os seguintes comandos

npm i
npm start

Etapa 9

Como criar ProgressBar e ProgressSpinner usando PrimeReact/Primefaces no ReactJS

Resumo

Neste artigo, aprendemos como criar o projeto react, definir o PrimeReact UI e criar os componentes React js ProgressBar, ProgressSpinner e PrimeReact UI.

Fonte: https://www.c-sharpcorner.com/article/how-to-create-progressbar-and-progressspinner-using-primereactprimefaces-in-rea/

#primereact  #primefaces #react 

Étienne-Isaac Le Gall

Étienne-Isaac Le Gall

1655854200

Créer ProgressBar Et ProgressSpinner à L'aide De PrimeReact/Primefaces

Cadre d'interface utilisateur PRIMEREACT qui contient plus de 80 composants d'interface utilisateur React avec une qualité irréprochable pour vous aider à mettre en œuvre toutes vos exigences d'interface utilisateur avec style.

Les composants PrimeReact peuvent être facilement utilisés/intégrés à ProgressBar et ProgressSpinner. Dans cet exemple, un panneau de registre est simulé à l'aide de ProgressBar et ProgressSpinner.

Conditions préalables

  • Javascript
  • Connaissance de base de React js
  • Node.js
  • Code VS, Visual Studio

Nous couvrons les choses ci-dessous,

  • Créer une application React
  • Installation de Primeface
  • ProgressBar et ProgressSpinner dans React js

Étape 1

Exécutez la commande ci-dessous pour créer React js

npx create-react-app prime-app
cd prime-app
npm start

Étape 2

Exécutez la commande ci-dessous pour installer PrimeReact

npm install primereact primeicons

Créez les fichiers selon l'image ci-dessous

Étape 3

Ajoutez le code ci-dessous dans l'App.js

import React, { useState, useEffect, useRef } from 'react';
import { ProgressBar } from 'primereact/progressbar';
import { Toast } from 'primereact/toast';
import { ProgressSpinner } from 'primereact/progressspinner';

function App() {
    const [value1, setValue1] = useState(0);
    const toast = useRef(null);
    const interval = useRef(null);
    const displayValueTemplate = (value) => {
        return (
            <React.Fragment>
                {value}/<b>100</b>
            </React.Fragment>
        );
    }
    useEffect(() => {
        let val = value1;
        interval.current = setInterval(() => {
            val += Math.floor(Math.random() * 10) + 1;
            if (val >= 100) {
                val = 100;
                toast.current.show({ severity: 'info', summary: 'Success', detail: 'Process Completed' });
                clearInterval(interval.current);
            }
            setValue1(val);
        }, 2000);

        return () => {
            if (interval.current) {
                clearInterval(interval.current);
                interval.current = null;
            }
        }
    }, []); // eslint-disable-line react-hooks/exhaustive-deps

    return (
        <div>
            <Toast ref={toast}></Toast>
            <div className="card">
                <h5>Dynamic</h5>
                <ProgressBar value={value1}></ProgressBar>
                <h5>Static</h5>
                <ProgressBar value={50}></ProgressBar>
                <h5>Custom display value</h5>
                <ProgressBar value={40} displayValueTemplate={displayValueTemplate}></ProgressBar>
                <h5>Indeterminate</h5>
                <ProgressBar mode="indeterminate" style={{ height: '6px' }}></ProgressBar>
            </div>
            <div>
            <div className="card">
                <h5>Basic</h5>
                <ProgressSpinner />
                <h5>Custom</h5>
                <ProgressSpinner style={{width: '50px', height: '50px'}} strokeWidth="8" fill="var(--surface-ground)" animationDuration=".5s"/>
            </div>
        </div>
        </div>
    );
}
export default App;

Étape 4

Ajoutez le code ci-dessous dans index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <!-- PrimeReact -->
    <link rel="stylesheet" href="https://unpkg.com/primeicons/primeicons.css" />
    <link rel="stylesheet" href="https://unpkg.com/primereact/resources/themes/lara-light-indigo/theme.css" />
    <link rel="stylesheet" href="https://unpkg.com/primereact/resources/primereact.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/primeflex@3.1.2/primeflex.min.css" />

    <!-- Dependencies -->
    <script src="https://unpkg.com/react/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://unpkg.com/react-transition-group@4.4.2/dist/react-transition-group.js"></script>

    <!-- Demo -->
    <script src="https://unpkg.com/primereact/core/core.min.js"></script>
    <script src="https://unpkg.com/primereact/splitter/splitter.min.js"></script>
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Étape 5

Ajoutez le code ci-dessous dans App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Étape 6

Ajoutez le code ci-dessous dans le contires.json

[{
    "name": "Afghanistan",
    "code": "AF"
}, {
    "name": "Åland Islands",
    "code": "AX"
}, {
    "name": "Albania",
    "code": "AL"
}, {
    "name": "Algeria",
    "code": "DZ"
}, {
    "name": "American Samoa",
    "code": "AS"
}, {
    "name": "Andorra",
    "code": "AD"
}, {
    "name": "Angola",
    "code": "AO"
}, {
    "name": "Anguilla",
    "code": "AI"
}, {
    "name": "Antarctica",
    "code": "AQ"
}, {
    "name": "Antigua and Barbuda",
    "code": "AG"
}, {
    "name": "Argentina",
    "code": "AR"
}, {
    "name": "Armenia",
    "code": "AM"
}, {
    "name": "Aruba",
    "code": "AW"
}, {
    "name": "Uruguay",
    "code": "UY"
}, {
    "name": "Uzbekistan",
    "code": "UZ"
}, {
    "name": "Vanuatu",
    "code": "VU"
}, {
    "name": "Venezuela",
    "code": "VE"
}, {
    "name": "Viet Nam",
    "code": "VN"
}, {
    "name": "Virgin Islands, British",
    "code": "VG"
}, {
    "name": "Virgin Islands, U.S.",
    "code": "VI"
}, {
    "name": "Wallis and Futuna",
    "code": "WF"
}, {
    "name": "Western Sahara",
    "code": "EH"
}, {
    "name": "Yemen",
    "code": "YE"
}, {
    "name": "Zambia",
    "code": "ZM"
}, {
    "name": "Zimbabwe",
    "code": "ZW"
}]

Étape 7

Ajoutez le code suivant dans package.json

{
  "name": "prime-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "primeicons": "^5.0.0",
    "primereact": "^8.1.1",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-redux": "^8.0.2",
    "react-scripts": "^2.1.3",
    "redux": "^4.2.0",
    "web-vitals": "^2.1.4",
    "primeflex": "^3.1.0",
    "react-transition-group": "^4.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Étape 8

Exécutez les commandes suivantes

npm i
npm start

Étape 9

Comment créer ProgressBar et ProgressSpinner à l'aide de PrimeReact/Primefaces dans ReactJS

Sommaire

Dans cet article, nous avons appris à créer un projet React, à définir PrimeReact UI et à créer des composants React js ProgressBar, ProgressSpinner et PrimeReact UI.

Source : https://www.c-sharpcorner.com/article/how-to-create-progressbar-and-progressspinner-using-primeractprimefaces-in-rea/

#primereact  #primefaces #react