Languages
[Edit]
PL

React - pasek post─Öpu

0 points
Created by:
Zayaan-Rasmussen
323

W tym kr├│tkim artykule chcieliby┼Ťmy pokaza─ç, jak stworzy─ç w┼éasny pasek post─Öpu w Reakcie.

Uwaga:

W tym artykule dowiesz si─Ö, jak utworzy─ç animowany pasek post─Öpu.

Praktyczny przykład:

// ONLINE-RUNNER:browser;

// import React from 'react';
// import ReactDOM from 'react-dom';

const containerStyle = {
  	border: '1px solid silver',
  	background: '#ededed'
};

const contentStyle = {
  	background: '#00cc00',
  	height: '24px',
  	textAlign: 'center',
  	lineHeight: '24px',
  	fontFAmily: 'sans-serif'
};

const ProgressBar = ({progress}) => {
  	const state = `${progress}%`;
    return (
      <div style={containerStyle}>
        <div style={{...contentStyle, width: state}}>
          {progress > 5 ? state : ''}
        </div>
      </div>
    );
};

const App = () => {
  return (
    <div>
      <ProgressBar progress={0} />
      <br />
      <ProgressBar progress={5} />
      <br />
      <ProgressBar progress={20} />
      <br />
      <ProgressBar progress={50} />
      <br />
      <ProgressBar progress={75} />
      <br />
      <ProgressBar progress={100} />
    </div>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root);

ReactJS (PL)

React - pasek post─Öpu
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join