• Stars
    star
    496
  • Rank 85,951 (Top 2 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 5 years ago
  • Updated about 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

♻️ Reuse React components to create new ones



reuse


Reuse different React components to create new ones
Play on CodeSandbox



NPM version Dependencies Build Status Coverage Status

Installation

npm i reuse

Thanks to @eldargab for the package name on npm.

Why

This enables (sub)atomic design approach.

When using classic CSS, we have a powerful way to compose "stylesheet components" by applying multiple class names to our HTML elements (.btn, .large, .rounded etc.). But, by doing that in React, which has its own component structure, we'll have conflicting component structures.

Reuse solves it by combining React components together as if they were CSS classes. This also means that not only style will be composed, but also JavaScript behavior, like React lifecycle methods and event handlers.

Usage

Reuse simply exports a factory method that returns a React component. You can leverage that method in two ways: augmentation and combination.

Examples

Augmentation

The component returned by the use factory will expect a use prop:

import use from "reuse";

const Box = use();

<Box />; // null
<Box use="div" />; // <div />
<Box use={Link} />; // <Link />

You can create the component with a default element:

const Box = use("div");

<Box />; // <div />
<Box use="span" />; // <span />

You can create the component with another component. Just make sure to render the use prop as the underlying element and pass the other props down (at least, when use isn't a string – HTML element):

import React from "react";
import use from "reuse";

// grab the `use` prop and pass down other props
const Base = ({ use: T = "div", ...props }) => <T {...props} />;

const Box = use(Base);

<Box />; // <div />
<Box use="span" />; // <span />

const BoxSpan = use(Box, "span");
<BoxSpan />; // <span />

You can use Base to filter custom props when use is a string using @emotion/is-prop-valid, for example.

Combination

Let's create some components:

// Using styled-components
const Paper = styled(use("div"))`
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.30);
`;

// Using class names
const Rounded = use(({ use: T, ...props }) => (
  <T
    {...props}
    className={`rounded ${props.className}`}
  />
), "div");

// Using inline styles
const Button = use(({ use: T, ...props }) => (
  <T
    {...props}
    style={{
      padding: "0 1em",
      lineHeight: "2.5em",
      background: "#3f51b5",
      color: "white",
      ...props.style
    }}
  />
), "button");

Once you have a few of those components, you can combine them using the same use methods:

import use from "reuse";
import { Rounded, Paper, Button } from "../components";

// with factory
const RoundedPaperButton = use(Rounded, Paper, Button);
<RoundedPaperButton />; // <button style="..." class="..." />
<RoundedPaperButton use="div" />; // <div style="..." class="..." />

// with prop
<Rounded use={[Paper, Button]} /> // <button style="..." class="..." />
<Rounded use={[Paper, Button, "div"]} /> // <div style="..." class="..." />

Note that the underlying HTML element will always be based on the last component you pass to use.

FAQ

How does this compare to render props and HOCs?

These are equivalent implementations:

Render props

<Paper>
  {paperProps => (
    <Rounded {...paperProps}>
      {roundedProps => (
        <Button {...roundedProps}>
          {buttonProps => (
            <button {...buttonProps}>Button</button>
          )}
        </Button>
      )}
    </Rounded>
  )}
</Paper>

High-order components

withPaper(withRounded(withButton(props => <button {...props}>Button</button>)));

Reuse

use(Paper, Rounded, Button);
// or
<Paper use={[Rounded, Button]} />

When using render props or HOCs, you have to stick with their static (HOC) or dynamic implementation (render prop). With Reuse, besides simplicity, you can use both depending on your needs.

License

MIT © Haz

More Repositories

1

constate

React Context + State
TypeScript
3,916
star
2

arc

React starter kit based on Atomic Design
JavaScript
2,910
star
3

rest

REST API generator with Node.js, Express and Mongoose
JavaScript
1,778
star
4

generact

Generate React components by replicating your own
JavaScript
1,481
star
5

awesome-react-context

😎 A curated list of stuff related to the new React Context API
JavaScript
915
star
6

styled-tools

Useful interpolated functions for CSS-in-JS
JavaScript
805
star
7

schm

Composable schemas for JavaScript and Node.js
JavaScript
513
star
8

singel

Single Element Pattern
JavaScript
409
star
9

nod

Node.js module generator/boilerplate with Babel, Jest, Flow, Documentation and more
JavaScript
360
star
10

redux-saga-thunk

Dispatching an action handled by redux-saga returns promise
JavaScript
221
star
11

styled-theme

Extensible theming system for styled-components 💅
JavaScript
183
star
12

querymen

Querystring parser middleware for MongoDB, Express and Nodejs (MEN)
JavaScript
129
star
13

parse-prop-types

Parses React prop-types into a readable object
JavaScript
67
star
14

bodymen

Body parser middleware for MongoDB, Express and Nodejs (MEN)
JavaScript
48
star
15

redux-saga-social-login

Facebook/Google login implementation with redux-saga
JavaScript
25
star
16

list-react-files

List React component files inside a directory
JavaScript
24
star
17

mongoose-keywords

Mongoose plugin that generates a keywords path combining other paths values
JavaScript
22
star
18

redux-modules

A modular approach to better organize redux stuff (not another library)
JavaScript
21
star
19

generator-rest-example

A fully commented RESTful API example generated with generator-rest
JavaScript
18
star
20

styled-selector

Get static CSS(-in-JS) selectors from React components
TypeScript
17
star
21

coolors-to-hex

Get hexadecimal values from a coolors url
JavaScript
16
star
22

webpack-blocks-split-vendor

A webpack block that splits vendor javascript into separated bundle
JavaScript
15
star
23

webpack-blocks-happypack

A webpack block that adds happypack support to your webpack config
JavaScript
12
star
24

redux-form-submit

Adds an async submit action creator to redux-form
JavaScript
9
star
25

webpack-spawn-plugin

A webpack plugin that runs child_process.spawn within compilation
JavaScript
7
star
26

waterfall-grid

A Polymer wrapper element for waterfall.js, a 1KB Javascript library for Pinterest-like grids.
HTML
7
star
27

webpack-blocks-server-source-map

A webpack block that adds source map support to server bundle
JavaScript
5
star
28

yo

A Yeoman generator for generating next generation of Yeoman generators
JavaScript
5
star
29

webpack-assets-by-type-plugin

A webpack plugin that save assets by type
JavaScript
5
star
30

arc-universal-redux

Universal Redux version of ARc boilerplate
JavaScript
5
star
31

webpack-sort-chunks

Sorts webpack chunks by dependency
JavaScript
4
star
32

webpack-child-config-plugin

A webpack plugin that runs/watches another config
JavaScript
4
star
33

rest-api

REST API Boilerplate with Mongoose, Express and Nodejs
JavaScript
4
star
34

rich-param

An object with name and value which accepts pluggable methods as formatters or validators
JavaScript
3
star
35

reakit-code-lab

TypeScript
3
star
36

arc-fullstack

Fullstack version of ARc boilerplate
JavaScript
3
star
37

mongoose-create-unique

Mongoose plugin to create a document or return the existing one based on the unique index
JavaScript
3
star
38

divisa

A game about war and peace.
JavaScript
2
star
39

eyeport

Collection of useful methods to deal with element and viewports in DOM
JavaScript
2
star
40

alpha-bank

JavaScript
2
star
41

guild

Just a social network prototype made with jQuery
HTML
2
star
42

is-git-rev

Verify if a string is a git-rev hash
JavaScript
2
star
43

clone

JavaScript
1
star
44

radiotoca

A PHP web radio with Twitter integration
PHP
1
star
45

adjacente

Blog para disciplina Expansão dos Sentidos
JavaScript
1
star
46

diegohaz

1
star
47

hear-parse

JavaScript
1
star
48

hear-api

JavaScript
1
star
49

diegohaz.com

JavaScript
1
star