Fix issue #4: remove reference to react-bootstrap/ThemeProvider

Author: jaywilz

README.md

@@ -3,7 +3,7 @@
 
 # React Bootstrap Range Slider
 
-A slider component for React Bootstrap v1.0.0-beta / Bootstrap 4 that extends the native HTML `<input type="range">` element.
+A slider component for React Bootstrap v1.0.0+ / Bootstrap 4 that extends the native HTML `<input type="range">` element.
 
 Check out the [Examples Page](https://jaywilz.github.io/react-bootstrap-range-slider/) for live demos of all main slider features.
 
@@ -20,13 +20,21 @@ or
 
 ### Prerequisites
 
-[React Bootstrap](https://github.com/react-bootstrap/react-bootstrap) and [Bootstrap](https://github.com/twbs/bootstrap) must be installed and the [CSS](https://react-bootstrap.netlify.com/getting-started/introduction#stylesheets) from Bootstrap imported.
+[React Bootstrap](https://github.com/react-bootstrap/react-bootstrap) must be installed and the [Bootstrap CSS](https://react-bootstrap.netlify.com/getting-started/introduction#stylesheets) imported.
 
 ## Usage
 
+In your `index.js` or similar:
+
 ```JavaScript
-import React, { useState } from 'react';
+import 'bootstrap/dist/css/bootstrap.css'; 
 import 'react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css';
+```
+
+Your component:
+
+```JavaScript
+import React, { useState } from 'react';
 import RangeSlider from 'react-bootstrap-range-slider';
 
 const MyComponent = () => {
@@ -36,7 +44,7 @@ const MyComponent = () => {
   return (
     <RangeSlider
       value={value}
-      onChange={changeEvent => setValue(changeEvent.target.value)}
+      onChange={changeEvent => setValue(Number(changeEvent.target.value))}
     />
   );
 
@@ -45,7 +53,7 @@ const MyComponent = () => {
 
 ## Features
 
- - Compatible with React Bootstrap v1.0.0-beta and Bootstrap 4;
+ - Compatible with React Bootstrap v1.0.0+ and Bootstrap 4;
  - Implemented using native HTML `<input type="range">` element;
  - Aligns horizontally with Bootstrap form controls;
  - Bootstrap small (`sm`) and large (`lg`) sizes are supported;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-range-slider",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "A range slider component for React Bootstrap (Bootstrap 4) that extends the native HTML input (type=range) element.",
   "keywords": [
     "react",
@@ -24,16 +24,12 @@
     "build:examples-umd": "BABEL_ENV=build NODE_ENV=examples rollup -c",
     "build:pages": "node_modules/@babel/cli/bin/babel.js docs/js/examples.src.js --out-file docs/js/examples.js --presets=@babel/preset-env,@babel/preset-react",
     "test": "cross-env BABEL_ENV=test NODE_ENV=test jest --no-cache",
-    "test:coverage": "npm test -- --coverage",
-    "test:badges": "npm run test:coverage && jest-coverage-badges"
+    "test:coverage": "npm test -- --coverage"
   },
   "jest": {
     "moduleNameMapper": {
       "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
-    },
-    "coverageReporters": [
-      "json-summary"
-    ]
+    }
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
@@ -58,7 +54,6 @@
   },
   "dependencies": {
     "classnames": "^2.2.6",
-    "jest-coverage-badges": "^1.1.2",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

src/RangeSlider.js

@@ -24,7 +24,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useBootstrapPrefix } from 'react-bootstrap/ThemeProvider';
 import classNames from 'classnames';
 
 const DEFAULT_CLASS_PREFIX = 'range-slider';
@@ -48,7 +47,7 @@ const RangeSlider = React.forwardRef(({
   className,
 }, ref) => {
 
-  const prefix = useBootstrapPrefix(bsPrefix, DEFAULT_CLASS_PREFIX);
+  const prefix = bsPrefix || DEFAULT_CLASS_PREFIX;
 
   const isTooltip = tooltip === 'auto' || tooltip === 'on';