menu

React

A community of developers, designers and others who love React.js. ⚛️

Channels
Team

Announcing Reuse ♻️

September 24, 2018 at 1:58pm

Announcing Reuse ♻️

September 24, 2018 at 1:58pm

https://github.com/diegohaz/reuse

Hi, guys. This is a technique I've been using on several projects. So I decided to make it open source. Hope you guys find it useful. 😄


September 24, 2018 at 2:18pm

interesting! couldn't you achieve the same by simply having style objects and then spreading the props?

  • reply
  • like

also how do you compose behavior?

  • reply
  • like

Also interesting idea

  • reply
  • like

I like the idea of combining components, this could be pretty useful for Atomic design patterns

  • reply
  • like

How interesting, you already have my star on github :D

like-fill
1
  • reply
  • like

interesting! couldn't you achieve the same by simply having style objects and then spreading the props?

You could. But then you'll create another "component" structure apart of React component structure. I don't think that's problematic though. It's just another approach. :)

  • reply
  • like

also how do you compose behavior?

Combined components are actually mounted, so React lifecycles will be triggered for each of them, if there's one. Props are also merged, so if a component implements an onClick handler, for example, the final component will keep this behavior.

  • reply
  • like

Thanks for sharing, Diego! The approach seems quite elegant :)

One question, slightly off-topic: How did you create that fancy graphic? 😅

like-fill
2
  • reply
  • like

what happens if you have a box which has a 1px border (for example) and you combine it with one for a rounded corner? do you get a single box with a 1px border + rounded corners, or do you get the border being clipped by the shape of the rounded box (due to nesting)?

  • reply
  • like

Thanks for sharing, Diego! The approach seems quite elegant :)

One question, slightly off-topic: How did you create that fancy graphic? 😅

I used my not yet rusted skills on Illustrator. 😄

like-fill
1
  • reply
  • like

what happens if you have a box which has a 1px border (for example) and you combine it with one for a rounded corner? do you get a single box with a 1px border + rounded corners, or do you get the border being clipped by the shape of the rounded box (due to nesting)?

There's no nested DOM nodes, so you'll get a single element with 1px border and rounded corners.

like-fill
1
  • reply
  • like

This looks really cool, but also quite confusing. It doesn't seem clear to me at all which element will be rendered in the end. Does <PaperRoundedButton /> end up as a <button> because <Button /> is the last element passed in? What if Paper, Rounded, and Button all render different base elements?

  • reply
  • like

There also seems to be some overlap with styled-component's new as prop. Not really an issue, just an observation.

  • reply
  • like

This looks really cool, but also quite confusing. It doesn't seem clear to me at all which element will be rendered in the end. Does <PaperRoundedButton /> end up as a <button> because <Button /> is the last element passed in? What if Paper, Rounded, and Button all render different base elements?

The last element will be used. I probably should make it more clear in the readme. Thanks for bringing this up.

  • reply
  • like

There also seems to be some overlap with styled-component's new as prop. Not really an issue, just an observation.

Yeah, that's pretty similar. And that's actually one of the reasons I made it. You can see the whole story here: https://github.com/reakit/reakit/issues/226

like-fill
2
  • reply
  • like

I have one small question, what this library does is reaaaally similar to the new feature of styled-component "as" ?

  • reply
  • like

I have one small question, what this library does is reaaaally similar to the new feature of styled-component "as" ?

  • reply
  • like

September 25, 2018 at 2:02pm

Took me awhile to figure out that paper was the dropshadow. Regardless, nice idea!

  • reply
  • like

September 26, 2018 at 2:38pm

Took me awhile to figure out that paper was the dropshadow. Regardless, nice idea!

Oh, I thought it would be easier to understand, specially because of the popularity of material design. 😅

like-fill
2
  • reply
  • like

September 27, 2018 at 9:10am

Looks neat!

like-fill
1
  • reply
  • like

The last element will be used. I probably should make it more clear in the readme. Thanks for bringing this up.

Doesn't have to be very detailed, but do you mind sharing how that's working? From your render props example, I would've naively assumed the library basically nests components, but as you said, that's not the case and you'll end up with a single component with both border and rounded corners.

  • reply
  • like

Doesn't have to be very detailed, but do you mind sharing how that's working? From your render props example, I would've naively assumed the library basically nests components, but as you said, that's not the case and you'll end up with a single component with both border and rounded corners.

I meant that there will be no more than a single DOM node, but React components will be nested. :)

like-fill
1
  • reply
  • like

September 28, 2018 at 2:42am

Makes sense 👍So I guess it will be difficult for some things such as a box that uses Rounded and Border? Since it will create one div with a rounded border and one div inside that with a border?

  • reply
  • like

Makes sense 👍So I guess it will be difficult for some things such as a box that uses Rounded and Border? Since it will create one div with a rounded border and one div inside that with a border?

It'll create just one div, only React components will be nested.

Take a look at this example: https://codesandbox.io/s/github/diegohaz/reuse/tree/master/examples/paper-rounded-button

It'll render a single `button` element, but React components will be nested (one renders the other until they finally render the `button`).

like-fill
1
  • reply
  • like
  • reply
  • like
Show more messages