Reuse Simple

66 | ; // 67 | ``` 68 | 69 | You can create the component with a default element: 70 | 71 | ```jsx 72 | const Box = use("div"); 73 | 74 | ; //

75 | ; // 76 | ``` 77 | 78 | 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): 79 | 80 | ```jsx 81 | import React from "react"; 82 | import use from "reuse"; 83 | 84 | // grab the `use` prop and pass down other props 85 | const Base = ({ use: T = "div", ...props }) => ; 86 | 87 | const Box = use(Base); 88 | 89 | ; //

90 | ; // 91 | 92 | const BoxSpan = use(Box, "span"); 93 | ; // 94 | ``` 95 | 96 | > You can use `Base` to filter custom props when `use` is a string using [@emotion/is-prop-valid](https://github.com/emotion-js/emotion/tree/master/next-packages/is-prop-valid), for example. 97 | 98 | ### Combination 99 | 100 | Let's create some components: 101 | 102 | ```jsx 103 | 104 | // Using styled-components 105 | const Paper = styled(use("div"))` 106 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.30); 107 | `; 108 | 109 | // Using class names 110 | const Rounded = use(({ use: T, ...props }) => ( 111 | 115 | ), "div"); 116 | 117 | // Using inline styles 118 | const Button = use(({ use: T, ...props }) => ( 119 | 129 | ), "button"); 130 | ``` 131 | 132 | Once you have a few of those components, you can combine them using the same `use` methods: 133 | 134 | ```jsx 135 | import use from "reuse"; 136 | import { Rounded, Paper, Button } from "../components"; 137 | 138 | // with factory 139 | const RoundedPaperButton = use(Rounded, Paper, Button); 140 | ; // 166 | )} 167 | 168 | )} 169 | 170 | )} 171 | 172 | ``` 173 | 174 | **High-order components** 175 | ```jsx 176 | withPaper(withRounded(withButton(props => ))); 177 | ``` 178 | 179 | **Reuse** 180 | ```jsx 181 | use(Paper, Rounded, Button); 182 | // or 183 | 184 | ``` 185 | 186 | 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. 187 | 188 | 189 | 190 | 191 | ## License 192 | 193 | MIT © [Haz](https://github.com/diegohaz) 194 | -------------------------------------------------------------------------------- /test/index.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import use from "../src"; 3 | import { getTreeJson } from "./testUtils"; 4 | 5 | // Serialize `[Function]` 6 | expect.addSnapshotSerializer({ 7 | test: val => typeof val === "function", 8 | print: val => val.name 9 | }); 10 | 11 | // Serialize `React.forwardRef` 12 | expect.addSnapshotSerializer({ 13 | test: val => 14 | val && 15 | typeof val.$$typeof === "symbol" && 16 | val.$$typeof.toString() === "Symbol(react.forward_ref)", 17 | print: () => "ForwardRef" 18 | }); 19 | 20 | type UseProps = { use?: React.ReactType; children?: React.ReactNode }; 21 | 22 | test("use component", () => { 23 | const Box = ({ use: T = "div", ...props }: UseProps) => ; 24 | const UseBox = use(Box); 25 | expect(getTreeJson()).toMatchInlineSnapshot(` 26 | 27 |

28 | 29 | `); 30 | }); 31 | 32 | test("different underlying element", () => { 33 | const Box = ({ use: T = "div", ...props }: UseProps) => ; 34 | const BoxSpan = use(Box, "span"); 35 | expect(getTreeJson()).toMatchInlineSnapshot(` 36 | 39 | 40 | 41 | `); 42 | }); 43 | 44 | test("use component without default use prop", () => { 45 | const Box = ({ use: T, ...props }: UseProps) => (T ? : null); 46 | const UseBox = use(Box); 47 | expect(getTreeJson()).toMatchInlineSnapshot(``); 48 | }); 49 | 50 | test("two different components", () => { 51 | const Box1 = ({ use: T = "div", ...props }) => ; 52 | const Box2 = ({ use: T = "span", ...props }) => ; 53 | const Box1Box2 = use(Box1, Box2); 54 | expect(getTreeJson()).toMatchInlineSnapshot(` 55 | 58 | 59 | 60 | 61 | 62 | `); 63 | }); 64 | 65 | test("two different components rendering the same", () => { 66 | const Box = ({ use: T = "div", ...props }: UseProps) => ; 67 | const Box1: React.SFC = props => ; 68 | const Box2: React.SFC = props => ; 69 | const Box1Box2 = use(Box1, Box2); 70 | expect(getTreeJson()).toMatchInlineSnapshot(` 71 | 74 | 77 | 78 | 79 |

80 | 81 | 82 | 83 | 84 | `); 85 | }); 86 | 87 | test("two components and a different underlying element", () => { 88 | const Box1 = ({ use: T = "div", ...props }) => ; 89 | const Box2 = ({ use: T = "span", ...props }) => ; 90 | const Box1Box2 = use(Box1, Box2, "a"); 91 | expect(getTreeJson()).toMatchInlineSnapshot(` 92 | 101 | 104 | 105 | 106 | 107 | `); 108 | }); 109 | 110 | test("use component with custom prop", () => { 111 | const Box = ({ use: T = "div", ...props }: UseProps & { foo: string }) => ( 112 | 113 | ); 114 | const UseBox = use(Box); 115 | expect(getTreeJson()).toMatchInlineSnapshot(` 116 | 119 |

122 | 123 | `); 124 | }); 125 | 126 | test("two different components with custom props", () => { 127 | const Box1 = ({ use: T = "div", ...props }: UseProps & { foo: string }) => ( 128 | 129 | ); 130 | const Box2 = ({ use: T = "span", ...props }: UseProps & { bar: string }) => ( 131 | 132 | ); 133 | const Box1Box2 = use(Box1, Box2); 134 | expect(getTreeJson()).toMatchInlineSnapshot(` 135 | 140 | 144 | 148 | 149 | 150 | `); 151 | }); 152 | 153 | test("use component with use prop", () => { 154 | const Box = ({ use: T = "div", ...props }: UseProps) => ; 155 | const UseBox = use(Box); 156 | expect(getTreeJson()).toMatchInlineSnapshot(` 157 | 160 | 161 | 162 | `); 163 | }); 164 | 165 | test("use component with same use prop", () => { 166 | const Box = ({ use: T = "div", ...props }: UseProps) => ; 167 | const UseBox = use(Box); 168 | expect(getTreeJson()).toMatchInlineSnapshot(` 169 | 172 |

355 | 356 | `); 357 | }); 358 | 359 | test("really nested use with use prop", () => { 360 | const Box = ({ use: T = "div", ...props }: UseProps) => ; 361 | const UseBox = use(use(use(use(use(Box))))); 362 | expect(getTreeJson()).toMatchInlineSnapshot(` 363 | 366 | 367 | 368 | `); 369 | }); 370 | 371 | test("empty use", () => { 372 | const Empty = use(); 373 | expect(getTreeJson()).toMatchInlineSnapshot(`null`); 374 | }); 375 | 376 | test("string use", () => { 377 | const Div = use("div"); 378 | expect(getTreeJson(

)).toMatchInlineSnapshot(`

`); 379 | }); 380 | 381 | test("string use with children", () => { 382 | const Div = use("div"); 383 | expect(getTreeJson(

Div

)).toMatchInlineSnapshot(` 384 |

387 | `); 388 | }); 389 | 390 | test("empty use with use prop", () => { 391 | const Empty = use(); 392 | expect(getTreeJson()).toMatchInlineSnapshot(`