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

Make it easy to pass className props down #2

Open
djgrant opened this issue Jan 11, 2024 · 0 comments
Open

Make it easy to pass className props down #2

djgrant opened this issue Jan 11, 2024 · 0 comments

Comments

@djgrant
Copy link
Owner

djgrant commented Jan 11, 2024

Instead of writing:

export const MyComponent = (props: { className: string }) => {
  return (
    <div className={props.className}>
      <div className="pt-10 pb-14 px-8" />
    </div>
  );
};

I could write:

export const MyComponent = classy.div(() => {
  return <div className="pt-10 pb-14 px-8">;
});

Or:

const MyDiv = classy.div();

export const MyComponent = MyDiv.extend(() => {
    return <div className="pt-10 pb-14 px-8">;
});

This would introduce two API changes:

  1. If the argument type is a function, classy creates a wrapped component.
  2. Classy components can be extended by calling an extend method. If a classnames object is the argument, it is merged with the original classnames object. If a function is the argument, the original component is wrapped, as per 1.
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