react-component / react-component/slider

Expose full event object

Open
#261 2 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

discussion
Dominant language
TypeScript
Stars
3.1k
Forks
768
Avg merge
11d 22h
Merged PRs (30d)
5

Description

In the past people have requested access to the event object in order to pull properties from it (https://github.com/react-component/slider/issues/57), and the proposed solution is both inadequate. For example, if I want to do something with e.target.parentElement and that parent element is dynamic, I have to do something brittle that breaks with the react way, and some data is simply lost forever without doing something really hacky like adding an additional event listener.

Currently if I need the target element, I'll have to do something like this as a one off?

onChange={newValue => props.doAction(newValue, document.querySelector(".i-hope-this-is-event-target"))}

Even then, there are a lot more keys on the event object and having to manually derive them from elsewhere seems like a step backward.

The way it works natively is more flexible and much cleaner:

onChange={props.doAction}

If you wanted to append the slider value to the event object vs throwing away the event object and only returning the slider value, it would be a minor breaking change that could be resolved with destructuring in the parameters of the function definition, ie:

function doAction({sliderValue}) { //stuff that only requires the sliderValue }

Enhancing the event object seems like a more powerful pattern than making assumptions about use cases that are awkward to work around when the assumption is wrong. Was there some specific reasoning behind not returning the event object from on* events? If not, would you accept a pull request that changes this behavior?

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by tracing the slider's on* callback implementation, especially onChange, and inspect how it currently passes the slider value. Determine the intended event-object shape and review related tests, if present; done means callbacks expose the requested event properties without losing the slider value.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.