New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@types/react-slider
Advanced tools
@types/react-slider - npm Package Compare versions
Comparing version 1.1.1 to 1.1.2
@@ -6,195 +6,277 @@ // Type definitions for react-slider 1.1 | ||
| // Loïc Huder <https://github.com/loichuder> | ||
| // Axel Bocciarelli <https://github.com/axelboc> | ||
| // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped | ||
| // TypeScript Version: 2.8 | ||
| // TypeScript Version: 3.9 | ||
| import * as React from 'react'; | ||
| import { Component, HTMLProps, RefCallback } from "react"; | ||
| declare namespace ReactSlider { | ||
| interface ReactSliderProps { | ||
| /** | ||
| * aria-label for screen-readers to apply to the thumbs. | ||
| * Use an array for more than one thumb. | ||
| * The length of the array must match the number of thumbs in the value array. | ||
| */ | ||
| ariaLabel?: string | string[]; | ||
| interface HTMLPropsWithRefCallback<T> extends HTMLProps<T> { | ||
| ref: RefCallback<T>; | ||
| } | ||
| /** | ||
| * aria-valuetext for screen-readers. | ||
| * Can be a static string, or a function that returns a string. | ||
| */ | ||
| ariaValuetext?: string | ((value: { index: number; value: number | number[]; valueNow: number }) => string); | ||
| export interface ReactSliderProps<T extends number | ReadonlyArray<number> = number> { | ||
| // Disallow children | ||
| children?: never; | ||
| /** | ||
| * The css class set on the slider node. | ||
| */ | ||
| className?: string; | ||
| /** | ||
| * `aria-label` for screen-readers to apply to the thumb(s). | ||
| * | ||
| * Use an array for more than one thumb. | ||
| * The length of the array must match the number of thumbs in the `value` array. | ||
| */ | ||
| ariaLabel?: T extends number ? string : ReadonlyArray<string>; | ||
| /** | ||
| * Determines the initial positions of the thumbs and the number of thumbs. | ||
| * | ||
| * If a number is passed a slider with one thumb will be rendered. | ||
| * If an array is passed each value will determine the position of one thumb. | ||
| * The values in the array must be sorted. | ||
| */ | ||
| defaultValue?: number | number[]; | ||
| /** | ||
| * `aria-valuetext` for screen-readers. | ||
| * | ||
| * Can be a static string, or a function that returns a string: | ||
| * | ||
| * ``` | ||
| * state => `Value: ${state.value}` | ||
| * ``` | ||
| * | ||
| * - `state.index` - the index of the thumb | ||
| * - `state.value` - the current value state | ||
| * - `state.valueNow` - the value of the thumb (i.e. aria-valuenow) | ||
| */ | ||
| ariaValuetext?: string | ((value: { index: number; value: T; valueNow: number }) => string); | ||
| /** | ||
| * If `true` the thumbs can't be moved. | ||
| */ | ||
| disabled?: boolean; | ||
| /** | ||
| * The css class set on the slider node. | ||
| * | ||
| * @default "slider" | ||
| */ | ||
| className?: string; | ||
| /** | ||
| * Inverts the slider. | ||
| */ | ||
| invert?: boolean; | ||
| /** | ||
| * Determines the initial position(s) of the thumb(s) and the number of thumbs. | ||
| * | ||
| * If a number is passed a slider with one thumb will be rendered. | ||
| * If an array is passed each value will determine the position of one thumb. | ||
| * The values in the array must be sorted. | ||
| * | ||
| * Don't pass a default value if the slider is controlled (i.e. if you already | ||
| * use the `value` prop). | ||
| * | ||
| * @default 0 | ||
| */ | ||
| defaultValue?: this["value"] extends T ? never : T; | ||
| /** | ||
| * The CSS class set on the marks. | ||
| */ | ||
| markClassName?: string; | ||
| /** | ||
| * If `true` the thumbs can't be moved. | ||
| * | ||
| * @default false | ||
| */ | ||
| disabled?: boolean; | ||
| /** | ||
| * Shows passed marks on the track, if true it shows all the marks, | ||
| * if an array of numbers it shows just the passed marks, if a number | ||
| * is passed it shows just the marks in that steps: like passing 3 | ||
| * shows the marks 3, 6, 9. | ||
| */ | ||
| marks?: boolean | number | number[]; | ||
| /** | ||
| * Inverts the slider. | ||
| * | ||
| * @default false | ||
| */ | ||
| invert?: boolean; | ||
| /** | ||
| * The maximum value of the slider. | ||
| */ | ||
| max?: number; | ||
| /** | ||
| * The CSS class set on the marks. | ||
| * | ||
| * @default "mark" | ||
| */ | ||
| markClassName?: string; | ||
| /** | ||
| * The minimum value of the slider. | ||
| */ | ||
| min?: number; | ||
| /** | ||
| * Shows passed marks on the track, if `true` it shows all the marks; | ||
| * if an array of numbers it shows just the passed marks; if a number | ||
| * is passed it shows just the marks in that steps: like passing `3` | ||
| * shows the marks `3`, `6`, `9`. | ||
| * | ||
| * @default [] | ||
| */ | ||
| marks?: boolean | number | ReadonlyArray<number>; | ||
| /** | ||
| * The minimal distance between any pair of thumbs. | ||
| * Must be positive, but zero means they can sit on top of each other. | ||
| */ | ||
| minDistance?: number; | ||
| /** | ||
| * The maximum value of the slider. | ||
| * | ||
| * @default 100 | ||
| */ | ||
| max?: number; | ||
| /** | ||
| * Callback called only after moving a thumb has ended. The callback | ||
| * will only be called if the action resulted in a change. The | ||
| * function will be called with one argument, the result value(s). | ||
| */ | ||
| onAfterChange?: (value: number | number[] | undefined | null) => void; | ||
| /** | ||
| * The minimum value of the slider. | ||
| * | ||
| * @default 0 | ||
| */ | ||
| min?: number; | ||
| /** | ||
| * Callback called before starting to move a thumb. The callback will | ||
| * only be called if the action will result in a change. The function | ||
| * will be called with one argument, the initial value(s). | ||
| */ | ||
| onBeforeChange?: (value: number | number[] | undefined | null) => void; | ||
| /** | ||
| * The minimal distance between any pair of thumbs. | ||
| * Must be positive, but `0` means they can sit on top of each other. | ||
| * | ||
| * @default 0 | ||
| */ | ||
| minDistance?: number; | ||
| /** | ||
| * Callback called on every value change. The function will be called | ||
| * with one argument, the new value(s). | ||
| */ | ||
| onChange?: (value: number | number[] | undefined | null) => void; | ||
| /** | ||
| * Callback called only after moving a thumb has ended. The callback | ||
| * will only be called if the action resulted in a change. | ||
| * | ||
| * - `value` - the result value, or values if the slider has multiple thumbs | ||
| */ | ||
| onAfterChange?: (value: T) => void; | ||
| /** | ||
| * Callback called when the the slider is clicked (thumb or tracks). | ||
| * Receives the value at the clicked position as argument. | ||
| */ | ||
| onSliderClick?: (value: number) => void; | ||
| /** | ||
| * Callback called before starting to move a thumb. The callback will | ||
| * only be called if the action will result in a change. | ||
| * | ||
| * - `value` - the initial value, or values if the slider has multiple thumbs | ||
| */ | ||
| onBeforeChange?: (value: T) => void; | ||
| /** | ||
| * Determines whether the slider moves horizontally (from left to right) | ||
| * or vertically (from top to bottom). | ||
| */ | ||
| orientation?: 'horizontal' | 'vertical'; | ||
| /** | ||
| * Callback called on every value change. | ||
| * | ||
| * - `value` - the new value, or values if the slider has multiple thumbs | ||
| */ | ||
| onChange?: (value: T) => void; | ||
| /** | ||
| * The result of the function is the value to be added or subtracted | ||
| * when the `Page Up` or `Page Down` keys are pressed. | ||
| * | ||
| * The current `step` value will be passed as the only argument. | ||
| * By default, paging will modify `step` by a factor of 10. | ||
| */ | ||
| pageFn?: (step: number) => number; | ||
| /** | ||
| * Callback called when the the slider is clicked (thumb or tracks). | ||
| * | ||
| * - `value` - the value at the clicked position | ||
| */ | ||
| onSliderClick?: (value: number) => void; | ||
| /** | ||
| * If `true` the active thumb will push other thumbs | ||
| * within the constraints of `min`, `max`, `step` and `minDistance`. | ||
| */ | ||
| pearling?: boolean; | ||
| /** | ||
| * Determines whether the slider moves horizontally (from left to right) | ||
| * or vertically (from top to bottom). | ||
| * | ||
| * @default "horizontal" | ||
| */ | ||
| orientation?: "horizontal" | "vertical"; | ||
| /** | ||
| * Provide a custom render function for the mark node. | ||
| * The render function will be passed one argument, | ||
| * an object with props that should be added to your handle node. | ||
| */ | ||
| renderMark?: (props: React.HTMLProps<HTMLSpanElement>) => JSX.Element; | ||
| /** | ||
| * The result of the function is the value to be added or subtracted | ||
| * when the `Page Up` or `Page Down` keys are pressed. | ||
| * | ||
| * - `step` - the current step value | ||
| * | ||
| * @default step => step * 10 | ||
| */ | ||
| pageFn?: (step: number) => number; | ||
| /** | ||
| * Provide a custom render function for dynamic thumb content. | ||
| * The render function will be passed two arguments. The first is | ||
| * an object that should be added to your thumb node. | ||
| */ | ||
| renderThumb?: ( | ||
| props: React.HTMLProps<HTMLDivElement>, | ||
| state: { index: number; value: number | number[]; valueNow: number }, | ||
| ) => JSX.Element; | ||
| /** | ||
| * If `true` the active thumb will push other thumbs within the constraints | ||
| * of `min`, `max`, `step` and `minDistance`. | ||
| * | ||
| * @default false | ||
| */ | ||
| pearling?: boolean; | ||
| /** | ||
| * Provide a custom render function for the track node. | ||
| * The render function will be passed two arguments. The first is | ||
| * an object that should be added to your handle node. | ||
| */ | ||
| renderTrack?: ( | ||
| props: React.HTMLProps<HTMLDivElement>, | ||
| state: { index: number; value: number | number[] }, | ||
| ) => JSX.Element; | ||
| /** | ||
| * Provide a custom render function for the mark node. | ||
| * | ||
| * The render function will be passed one argument, an object with props that | ||
| * should be added to your mark node. | ||
| * | ||
| * - `props` - props to be spread into your mark node | ||
| * | ||
| * @default props => <div {...props} /> | ||
| */ | ||
| renderMark?: (props: HTMLPropsWithRefCallback<HTMLSpanElement>) => JSX.Element | null; | ||
| /** | ||
| * Disables thumb move when clicking the slider track | ||
| */ | ||
| snapDragDisabled?: boolean; | ||
| /** | ||
| * Provide a custom render function for dynamic thumb content. | ||
| * | ||
| * The render function will be passed two arguments, an object with props that | ||
| * should be added to your thumb node, and an object with thumb and slider state. | ||
| * | ||
| * - `props` - props to be spread into your thumb node | ||
| * - `state.index` - the index of the thumb | ||
| * - `state.value` - the current value state | ||
| * - `state.valueNow` - the value of the thumb (i.e. `aria-valuenow`) | ||
| * | ||
| * @default props => <div {...props} /> | ||
| */ | ||
| renderThumb?: ( | ||
| props: HTMLPropsWithRefCallback<HTMLDivElement>, | ||
| state: { index: number; value: T; valueNow: number }, | ||
| ) => JSX.Element | null; | ||
| /** | ||
| * Value to be added or subtracted on each step the slider makes. | ||
| * Must be greater than zero. | ||
| * `max - min` should be evenly divisible by the step value. | ||
| */ | ||
| step?: number; | ||
| /** | ||
| * Provide a custom render function for the track node. | ||
| * | ||
| * The render function will be passed two arguments, an object with props that | ||
| * should be added to your handle node, and an object with track and slider state. | ||
| * | ||
| * - `props` - props to be spread into your track node | ||
| * - `state.index` - the index of the track | ||
| * - `state.value` - the current value state | ||
| * | ||
| * @default props => <div {...props} /> | ||
| */ | ||
| renderTrack?: ( | ||
| props: HTMLPropsWithRefCallback<HTMLDivElement>, | ||
| state: { index: number; value: T }, | ||
| ) => JSX.Element | null; | ||
| /** | ||
| * The css class set on the thumb that is currently being moved. | ||
| */ | ||
| thumbActiveClassName?: string; | ||
| /** | ||
| * Disables thumb move when clicking the slider track | ||
| * | ||
| * @default false | ||
| */ | ||
| snapDragDisabled?: boolean; | ||
| /** | ||
| * The css class set on each thumb node. | ||
| * | ||
| * In addition each thumb will receive a numbered css class of the form | ||
| * `${thumbClassName}-${i}`, e.g. `thumb-0`, `thumb-1`, ... | ||
| */ | ||
| thumbClassName?: string; | ||
| /** | ||
| * Value to be added or subtracted on each step the slider makes. | ||
| * | ||
| * Must be greater than zero. `max - min` should be evenly divisible by the step value. | ||
| * | ||
| * @default 1 | ||
| */ | ||
| step?: number; | ||
| /** | ||
| * The css class set on the tracks between the thumbs. | ||
| * In addition track fragment will receive a numbered css class of the form | ||
| * `${trackClassName}-${i}`, e.g. `track-0`, `track-1`, ... | ||
| */ | ||
| trackClassName?: string; | ||
| /** | ||
| * The css class set on the thumb that is currently being moved. | ||
| * @default "active" | ||
| */ | ||
| thumbActiveClassName?: string; | ||
| /** | ||
| * Like `defaultValue` but for | ||
| * [controlled components](http://facebook.github.io/react/docs/forms.html#controlled-components). | ||
| */ | ||
| value?: number | number[]; | ||
| /** | ||
| * The css class set on each thumb node. | ||
| * | ||
| * In addition each thumb will receive a numbered css class of the form | ||
| * `${thumbClassName}-${i}`, e.g. `thumb-0`, `thumb-1`, ... | ||
| * @default "thumb" | ||
| */ | ||
| thumbClassName?: string; | ||
| /** | ||
| * If `true` tracks between the thumbs will be rendered. | ||
| */ | ||
| withTracks?: boolean; | ||
| } | ||
| /** | ||
| * The css class set on the tracks between the thumbs. | ||
| * | ||
| * In addition track fragment will receive a numbered css class of the form | ||
| * `${trackClassName}-${i}`, e.g. `track-0`, `track-1`, ... | ||
| * @default "track" | ||
| */ | ||
| trackClassName?: string; | ||
| /** | ||
| * Like `defaultValue` but for | ||
| * [controlled components](http://facebook.github.io/react/docs/forms.html#controlled-components). | ||
| */ | ||
| value?: T; | ||
| /** | ||
| * If `true` tracks between the thumbs will be rendered. | ||
| * @default true | ||
| */ | ||
| withTracks?: boolean; | ||
| } | ||
| declare const ReactSlider: React.ComponentClass<ReactSlider.ReactSliderProps>; | ||
| declare class ReactSlider<T extends number | ReadonlyArray<number> = number> extends Component<ReactSliderProps<T>> { | ||
| /** | ||
| * Tell the slider to resize, for example if the parent container has resized | ||
| * independently of the window. | ||
| */ | ||
| resize: () => void; | ||
| } | ||
| export default ReactSlider; |
| { | ||
| "name": "@types/react-slider", | ||
| "version": "1.1.1", | ||
| "version": "1.1.2", | ||
| "description": "TypeScript definitions for react-slider", | ||
@@ -21,2 +21,7 @@ "license": "MIT", | ||
| "githubUsername": "loichuder" | ||
| }, | ||
| { | ||
| "name": "Axel Bocciarelli", | ||
| "url": "https://github.com/axelboc", | ||
| "githubUsername": "axelboc" | ||
| } | ||
@@ -35,4 +40,4 @@ ], | ||
| }, | ||
| "typesPublisherContentHash": "87ad01705260e3f442c70c93a03ec6976000d7e27ab4dbebc9621c3814e68129", | ||
| "typeScriptVersion": "3.4" | ||
| "typesPublisherContentHash": "ad07d6ebc7e0768a37a20fbdea511dd7c468cbff4989d57e281cb2052f5213f6", | ||
| "typeScriptVersion": "3.9" | ||
| } |
@@ -11,3 +11,3 @@ # Installation | ||
| ### Additional Details | ||
| * Last updated: Mon, 08 Feb 2021 07:19:40 GMT | ||
| * Last updated: Tue, 20 Apr 2021 08:01:20 GMT | ||
| * Dependencies: [@types/react](https://npmjs.com/package/@types/react) | ||
@@ -17,2 +17,2 @@ * Global values: none | ||
| # Credits | ||
| These definitions were written by [Jason Unger](https://github.com/jsonunger), [Björgvin Bæhrenz Þórðarson](https://github.com/bjorgvin), and [Loïc Huder](https://github.com/loichuder). | ||
| These definitions were written by [Jason Unger](https://github.com/jsonunger), [Björgvin Bæhrenz Þórðarson](https://github.com/bjorgvin), [Loïc Huder](https://github.com/loichuder), and [Axel Bocciarelli](https://github.com/axelboc). |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by15.7%
11318
- Lines of code
- increased by46.75%
248
No dependency changes