score:1
Accepted answer
the package is a bit outdated, so it is based on an older version of react that allowed refs to be simple strings. newer versions of react (as the one your are probably using) does not allow that anymore, hence the error.
see: element ref was specified as a string (map) but no owner was set
you should either:
- downgrade your react version (i would not suggest to use an older version just to use an outdated dependency)
- use a different library (a quick google search revelead a lot of react progressbar packages)
- use the javascript version of this library, and wrap the functionalty inside a custom react component
something along the lines of
import { circle } from 'progressbar.js'
export default class circleprogress extends react.component<props, state> {
componentdidmount() {
var bar = new circle('#container', {easing: 'easeinout'});
bar.animate(1);
}
render() {
return (
<div id="container"></div>
)
}
}
score:1
@gbalduzzi 's answer is the right and accepted one. i still wanted to post a full working example with a custom .svg image:
import react from 'react';
import progressbar from 'progressbar.js';
export default class customprogressshape extends react.component {
componentdidmount() {
var svgpath = document.getelementbyid('heart-path');
var path = new progressbar.path(svgpath, {
easing: 'easeinout',
duration: 5000,
step: function(state, circle) {
if (circle.value() === 1) {
circle.set(0);
circle.animate(1.0);
}
},
});
path.set(0);
path.animate(1.0);
}
render() {
return (
<>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewbox="0 0 100 100">
<path
fill-opacity="0"
stroke-width="0.5"
stroke="#f4f4f4"
d="m81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032c44.74,13.612,29.879,8.657,18.511,13.923 c6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379 c99.387,33.883,93.598,19.539,81.495,13.923z"
/>
<path
id="heart-path"
fill-opacity="0"
stroke-width="0.6"
stroke="#555"
d="m81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032c44.74,13.612,29.879,8.657,18.511,13.923 c6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379 c99.387,33.883,93.598,19.539,81.495,13.923z"
/>
</svg>
<div id="container"></div> <div id="heart-path2"></div>
</>
);
}
}
Source: stackoverflow.com
Related Query
- React & Progressbar.js: Custom shaped progress circle
- Progress circle bar in React JS
- React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function
- Creating custom function in React component
- React Formik : how to use custom onChange and onBlur
- react custom hooks vs normal functions, what is the difference
- How to mock react custom hook returned value?
- Is it possible to set a className on custom react components?
- How to handle dependencies array for custom hooks in react
- How to use absolute path to import custom scss, when using react + webpack?
- React Router with custom history not working
- React Typescript - Adding custom attribute
- Custom mailchimp signup form in React
- True custom attributes (e.g. Microdata) in React
- confusion about this React custom hook usage
- styled-components not applying style to custom functional react component
- React Material UI: How to give a button a custom color when disabled?
- Proptypes for custom react hooks
- React Context API not working from custom NPM component library
- Custom font not working in React Native
- How to mock a custom hook inside of a React component you want to test?
- FontFamily React Native App overwrite with device custom font (Samsung & Oppo)
- Swiper React | How to create custom navigation/pagination components using React refs?
- How to include custom JS files in to React create app
- Mocha, Enzyme: Unit testing custom functions in react component using enzyme
- React Custom Hooks fetch data globally and share across components?
- Custom alert dialog in react native?
- React Router v4 baseName and custom history
- React native deploying on iOS device stuck on Running 1 of 1 custom shell script
- React router: execute custom function on every <Link> navigation
More Query from same tag
- React: How to add new value to props from imported file?
- Conditional displaying of division REACT
- Style buttons with different palette colors
- Test config for AVA + React-Native
- ReactJs 0.14 - Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs
- How to conditionally update properties of items within a collection in React?
- Can't pass an initial array to a useState to modify it later
- Reactjs @setState with a dynamic key value
- I want to "Gatsby Build" and deploy to a subdirectory
- React router keep rendering unmatched route inside matched route
- MUI v5 + React styleguidist + ScopedCSSBaseline + createTheme styleOverrides: body fontSize change not working
- Turn an array of React context providers into a nested structure
- How can I create an unordered list in react based on array of objects?
- React js loop through array received from blade
- ReactJS: Converting simple example to Typescript
- I'm Trying to Inject An NPM package As A Plugin on A Next.js App to Avoid A "Module not found: Can't resolve 'child_process'" Error
- React Proptypes union type Breakpoint gives error
- How to get the changed (new) state value in React JS function with / without useEffect hook?
- wProps updating in react dev tools but conditional jsx not rendering correctly
- Typescript with React > Element implicitly has an 'any' type because expression of type 'string' can't be used to index
- Routing not working with deployed create-react-app on github pages with react-router v6
- how to call another reducer method with redux react
- 'bash' is not recognized as an internal or external command
- Tailwind CSS - How to disable transform/transition on hover when a button is disabled?
- React/Typescript - expects at least '3' arguments, but the JSX factory 'React.createElement' provides at most '2'. TS622
- React To Do List Filter
- How to dispatch an action to change the inner state in a react component
- Jquery Pagination In React - Expected an assignment or function call and instead saw an expression
- Jest - Unexpected token import
- React Link - TypeError: Cannot read properties of undefined (reading 'pathname')