Hola, quiero agregar la barra de progreso js en mi aplicación de reacción, pero no sé cómo hacerlo, soy un principiante, ¿alguien puede ayudarme? the progressbarjs: es de https://kimmobrunfeldt.github.io/progressbar.js/ así que básicamente debo agregar este código js en algún lugar de mi reacción:
var bar = new ProgressBar.Line(container, { strokeWidth: 4, easing: 'easeInOut', duration: 1400, color: '#FFEA82', trailColor: '#eee', trailWidth: 1, svgStyle: {width: '100%', height: '100%'}, from: {color: '#FFEA82'}, to: {color: '#ED6A5A'}, step: (state, bar) => { bar.path.setAttribute('stroke', state.color); } }); bar.animate(1.0);como gestionarlo por favor
El mismo creador de ProgressBar.js tiene una biblioteca npm ( llamada react-progress-bar ) que puede ser más adecuada para su uso en React sin demasiados cambios.
La documentación parece lo suficientemente completa, pero estoy indexando el hecho de que usted dice que es un principiante, así que aquí hay un ejemplo de cómo puede verse un componente <ProgressBar /> con esta biblioteca:
var App = React.createClass({ render: function render() { var options = { strokeWidth: 2 }; // For demo purposes so the container has some dimensions. // Otherwise progress bar won't be shown var containerStyle = { width: '200px', height: '200px' }; return ( <Circle progress={this.state.progress} text={'test'} options={options} initialAnimate={true} containerStyle={containerStyle} containerClassName={'.progressbar'} /> ); } });Hay muchas maneras de usar la barra de progreso, pero un patrón común es usarla como un cargador, mientras espera datos (por ejemplo, desde una llamada axios a un servidor/API).
Ese patrón generalmente se ve así:
... //your React code return ( <div> {dataIsFetched? <span>{data.content}</span> : <ProgressBar />} </div> )Consulte la biblioteca npm para saber cómo usarla.
Aquí un ejemplo para una barra de progreso circular
`
import { Circle } from 'progressbar.js' import { useEffect } from 'react' export default function CircleProgress () { useEffect(() => { var bar = new Circle('#container', {easing: 'easeInOut'}); bar.animate(1); }, []) return ( <div id="container"></div> ) }`Lo más probable es que no funcione ya que React no sabe qué es ProgressBar a menos que lo incluya en el proyecto. Parece que su API es bastante 'de bajo nivel', así que ¿por qué no buscas algunas barras de progreso hechas por React? Tal vez se adapte mejor a tus necesidades.
Puede consultar, por ejemplo, MUI , Bootstrap o algunas de las otras opciones disponibles.