Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Consider exposing a selection helper. #10

Open
wtgtybhertgeghgtwtg opened this issue Jan 10, 2019 · 0 comments
Open

Consider exposing a selection helper. #10

wtgtybhertgeghgtwtg opened this issue Jan 10, 2019 · 0 comments

Comments

@wtgtybhertgeghgtwtg
Copy link

Using an example from the reakit beta, let's say I want to make a button link

<Button to="/somewhere" use={Link} />

This works, but it has the unexpected side effect of passing all of the props Button uses to Link. Unexpected attributes are written to the DOM and you'll get a warning for trying to write the boolean opaque. It's not impossible to get around this

const SelectiveLink = props => <Link className={props.className} to={props.to} />
// ...
<Button to="/somewhere" use={SelectiveLink} />

but it has the side effect of adding another component to the tree. I think a better approach would be to allow the user to provide a list of props they want, then use that during the render over omit.
I propose an API like

import {select} from 'reuse';

// So instead of `omit(props, 'use', 'useNext')`, it'll do `pick(props, 'className', 'to')`.
const SelectiveLink = select(Link, ['className', 'to']);
// ...
<Button to="/somewhere" use={SelectiveLink} />

It wouldn't supplant the current one, just add a hot path and a helper. A potentially less verbose option would be an omission helper

import {filter} from 'reuse';

// So it'll do `omit(props, 'opaque', 'palette', 'use', 'useNext')`.
const SelectiveLink = filter(Link, ['opaque', 'palette']);
// ...
<Button to="/somewhere" use={SelectiveLink} />

but this is also potentially less performant. Additionally, the list of props could be provided by the implementing component.

const SelectiveLink = filter(Link, Button.propNames);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant