├── .gitignore ├── .prettierrc.json ├── .travis.yml ├── CONTRIBUTING.md ├── README.md ├── demo └── src │ └── index.js ├── nwb.config.js ├── package.json ├── src ├── index.d.ts └── index.js ├── tests ├── .eslintrc └── index-test.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | /coverage 2 | /demo/dist 3 | /es 4 | /lib 5 | /node_modules 6 | /umd 7 | npm-debug.log* 8 | .idea 9 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 110, 3 | "singleQuote": true 4 | } -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | 3 | language: node_js 4 | node_js: 5 | - 8 6 | 7 | before_install: 8 | - npm install codecov.io coveralls 9 | 10 | after_success: 11 | - cat ./coverage/lcov.info | ./node_modules/codecov.io/bin/codecov.io.js 12 | - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js 13 | 14 | branches: 15 | only: 16 | - master 17 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Prerequisites 2 | 3 | [Node.js](http://nodejs.org/) >= v4 must be installed. 4 | 5 | ## Installation 6 | 7 | - Running `npm install` in the component's root directory will install everything you need for development. 8 | 9 | ## Demo Development Server 10 | 11 | - `npm start` will run a development server with the component's demo app at [http://localhost:3000](http://localhost:3000) with hot module reloading. 12 | 13 | ## Running Tests 14 | 15 | - `npm test` will run the tests once. 16 | 17 | - `npm run test:coverage` will run the tests and produce a coverage report in `coverage/`. 18 | 19 | - `npm run test:watch` will run the tests on every change. 20 | 21 | ## Building 22 | 23 | - `npm run build` will build the component for publishing to npm and also bundle the demo app. 24 | 25 | - `npm run clean` will delete built resources. 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### 🙋‍♂️ Made by [@thekitze](https://twitter.com/thekitze) 2 | 3 | ### Other projects: 4 | - 🏫 [React Academy](https://reactacademy.io) - Interactive React and GraphQL workshops 5 | - 💌 [Twizzy](https://twizzy.app) - A standalone app for Twitter DM 6 | - 💻 [Sizzy](https://sizzy.co) - A tool for testing responsive design on multiple devices at once 7 | - 🤖 [JSUI](https://github.com/kitze/JSUI) - A powerful UI toolkit for managing JavaScript apps 8 | 9 | --- 10 | 11 | # conditional-wrap 12 | A simple React component for wrapping children based on a condition. 13 | 14 | ### Install 15 | ``` 16 | yarn add conditional-wrap 17 | ``` 18 | 19 | ### Example 20 | [Open demo on CodeSandbox](https://codesandbox.io/s/2wmr700nwp) 21 | 22 | ```js 23 | import React from 'react'; 24 | import { render } from 'react-dom'; 25 | import { Tooltip } from 'react-tippy'; 26 | 27 | import ConditionalWrap from 'conditional-wrap'; 28 | 29 | const Button = ({ tooltip, children }) => ( 30 | ( 33 | 34 | {children} 35 | 36 | )} 37 | > 38 | 39 | 40 | ); 41 | 42 | const Demo = () => ( 43 |
44 | 45 | 46 |
47 | ); 48 | 49 | render(, document.getElementById('root')); 50 | ``` 51 | -------------------------------------------------------------------------------- /demo/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import 'react-tippy/dist/tippy.css'; 3 | import { render } from 'react-dom'; 4 | import { Tooltip } from 'react-tippy'; 5 | 6 | import { ConditionalWrap } from '../../src'; 7 | 8 | const Button = ({ tooltip, children }) => ( 9 | {children}}> 10 | 11 | 12 | ); 13 | 14 | class Demo extends Component { 15 | render() { 16 | return ( 17 |
18 |

conditional-wrap

19 | 20 |
21 |
22 | 23 |
24 | ); 25 | } 26 | } 27 | 28 | render(, document.querySelector('#demo')); 29 | -------------------------------------------------------------------------------- /nwb.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | type: 'react-component', 3 | npm: { 4 | esModules: true, 5 | umd: false 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "conditional-wrap", 3 | "version": "1.0.3", 4 | "description": "conditional-wrap React component", 5 | "main": "lib/index.js", 6 | "module": "es/index.js", 7 | "files": [ 8 | "css", 9 | "es", 10 | "lib", 11 | "umd" 12 | ], 13 | "scripts": { 14 | "build": "nwb build-react-component --copy-files", 15 | "clean": "nwb clean-module && nwb clean-demo", 16 | "start": "nwb serve-react-demo", 17 | "test": "nwb test-react", 18 | "test:coverage": "nwb test-react --coverage", 19 | "test:watch": "nwb test-react --server" 20 | }, 21 | "dependencies": {}, 22 | "peerDependencies": { 23 | "react": ">=16.0.0" 24 | }, 25 | "devDependencies": { 26 | "@types/react": "^16.9.17", 27 | "nwb": "0.25.2", 28 | "react": "^16.4.0", 29 | "react-dom": "^16.4.0", 30 | "react-tippy": "^1.2.2" 31 | }, 32 | "author": "", 33 | "homepage": "", 34 | "license": "MIT", 35 | "repository": "https://github.com/kitze/conditional-wrap", 36 | "keywords": [ 37 | "react-component" 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /src/index.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | interface ConditionalWrapProps { 3 | condition: boolean; 4 | wrap: (children: JSX.Element) => JSX.Element; 5 | children: JSX.Element; 6 | } 7 | 8 | declare const ConditionalWrap: ({ condition, children, wrap }: ConditionalWrapProps) => JSX.Element; 9 | export { ConditionalWrap, ConditionalWrap as default }; 10 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const ConditionalWrap = ({ condition, children, wrap }) => 4 | condition ? React.cloneElement(wrap(children)) : children; 5 | 6 | export default ConditionalWrap; 7 | -------------------------------------------------------------------------------- /tests/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "mocha": true 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /tests/index-test.js: -------------------------------------------------------------------------------- 1 | import expect from 'expect' 2 | import React from 'react' 3 | import {render, unmountComponentAtNode} from 'react-dom' 4 | 5 | import Component from 'src/' 6 | 7 | describe('Component', () => { 8 | let node 9 | 10 | beforeEach(() => { 11 | node = document.createElement('div') 12 | }) 13 | 14 | afterEach(() => { 15 | unmountComponentAtNode(node) 16 | }) 17 | 18 | it('displays a welcome message', () => { 19 | render(, node, () => { 20 | expect(node.innerHTML).toContain('Welcome to React components') 21 | }) 22 | }) 23 | }) 24 | --------------------------------------------------------------------------------