React-speedofme NPM

React SpeedOf.Me Component

react-speedofme is a react component to use the API Speed Of Me

Usage:

NPM: npm install --save react-speedofme

Yarn: yarn add react-speedofme

// import the component
import { SpeedOfMe, preloadScript } from "react-speedofme";
// and just use it
class App extends Component {
  render () {
    return (
        <SpeedOfMe/>
    );
  }
}
// Export preloadScrtipt
export default preloadScript(App);

Creating Account and configuring SpeedOf.Me API

Create your account here Register
After creating the account configure your domain here: Configure Domain

Configuration Options:

prop	type	default	comments
segments	number	5	Number of segments in the speedometer
textColor	string	#666	Should be a valid color code - colorname, hexadecimal name or rgb value. Used for both showing the current value and the segment values
startColor	string	#FF471A	Should be a valid color code - colorname, hexadecimal name or rgb value. Should be a valid input for d3.interpolateHsl
endColor	string	#33CC33	Should be a valid color code - colorname, hexadecimal name or rgb value. Should be a valid input for d3.interpolateHsl
needleColor	string	steelblue	Should be a valid color code - colorname, hexadecimal name or rgb value. Should be a valid input for d3.interpolateHsl
needleTransitionDuration	number	500	Time in milliseconds.
needleTransition	string	easeQuadInOut	d3-easing-identifiers - easeLinear, easeQuadIn, easeQuadOut, easeQuadInOut, easeCubicIn, easeCubicOut, easeCubicInOut, easePolyIn, easePolyOut, easePolyInOut, easeSinIn,
currentValueText	string	${value}	Should be provided a string which should have ${value} placeholder which will be replaced with current value. By default, current value is shown (formatted with `valueFormat`). For example, if current Value is 333
loadingTextDownload	string	value	Should be provided a string for modify the text default the test of download
loadingTextUpload	string	value	Should be provided a string for modify the text default the test of upload
textdownloadexcellent	string	value	Should be provided a string for modify the text default for download Excellent
textdownloadacceptable	string	value	Should be provided a string for modify the text default for download Acceptable
textuploadexcellent	string	value	Should be provided a string for modify the text default for upload Excellent
textuploadacceptable	string	value	Should be provided a string for modify the text default for upload Acceptable
account	string	value	Should be provided your account SpeedOf.me
domainName	string	value	Domain that will be tested

Examples

You can view Examples here

Default with no config

import { SpeedOfMe, preloadScript } from "react-speedofme";
class App extends Component {
  render () {
    return (
        <SpeedOfMe/>
    );
  }
}
export default preloadScript(App);

With configurations

class App extends Component {
  render () {
    return (
        <SpeedOfMe
            account=''
            domainName=''
            segments={2}
            textColor='#FFF'
            startColor='#F4552C'
            endColor='#F9F9F9'
            needleColor='#989898'
            needleTransitionDuration={4000}
            needleTransition='easeElastic'
            currentValueText='50'
            textdownloadexcellent='Velocidade de download execelente.'
            textdownloadacceptable='Velocidade de download aceitável.'
            textuploadexcellent='Velocidade de upload execelente.'
            textuploadacceptable='Velocidade de upload aceitável.'
            loadingTextDownload='Rodando teste de Download, por favor, aguarde...'
            loadingTextUpload='Rodando teste de Upload, por favor, aguarde...'
        />
    );
  }
}
export default preloadScript(App);

Credits:

react-d3-speedometer react-d3-speedometer opentok-react opentok-react

License:

MIT

react speedofme speedofme

immutable lodash npm prop-types react-d3-speedometer react-display-name scriptjs

@everything-registry/sub-chunk-2614

6 years ago

6 years ago

6 years ago

6 years ago