wmt-slider

Slider component

Usage no npm install needed!

<script type="module">
  import wmtSlider from 'https://cdn.skypack.dev/wmt-slider';
</script>

README

wmt-slider

This module is a React Slider component to be used in your applications.

Setting up the module

  • git clone git@bitbucket.org:wmtp/wmt-slider.git
  • cd wmt-slider
  • npm install

Building the module

The module uses Typescript compiler (TSC) to compile the source code. To build the project run the following command:

  • npm run build

Installing the module for testing

You can install the module into your own React project as a dependency. After you clone the module you can install using the following command:

  • npm install /absolute/path/to/wmt-slider
  • i.e. -> npm install /Users/wmt/Documents/projects/npm/wmt-slider

Installing the module from npm

Use the following command to install from npm:

  • npm install wmt-slider

Importing the module

Once you have the module installed you can import exported functions into your code like so:

import Slider from "wmt-slider";

Using the module

Example of using the module:

<Slider lowerTag={"Relaxed"} upperTag={"Anxious"} title="Anxiety"
value={this.state.anxietySlider} handleChange={this.handleAnxietyChange}
thumbColor={"#EC407A"} trackColor={"#FFCA28"} />
  • lowerTag: The text that will appear on the left of the slider
  • upperTag: The text that will appear on the right of the slider
  • title: This prop is optional. It will place a title above the slider
  • value: The current state of the slider
  • handleChange: A handler function that is called when the slider value changes
  • thumbColor: Optional, Override the circle color on the slider
  • trackColor: Optional, Override the track color on the slider

Testing

  • Tests can be ran with the npm test command.
  • Tests are ran using Jest with Enzyme - More information about getting started with Jest can be found here.

Example render test:

it('renders without crashing', () => {
    shallow(<Slider />);
});`

Viewing API docs

You can generate and view the API docs by running the following command:

  • npm run docs

This will start a development server on localhost:6060 showing all the properties for the Slider component.

You can also view the docs which are hosted here: https://wmtp.bitbucket.io/ReactModules/docs/#/WmtpSlider

Viewing source code

https://bitbucket.org/wmtp/wmt-slider

Published module

Here is where the module is currently published: https://www.npmjs.com/package/wmt-slider

License

This project is licensed under the MIT License.