├── LICENSE.md ├── NoContent.js ├── NoContent.png ├── README.md └── no-content-inkspace.svg /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Gêdhean Alves Vieira 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /NoContent.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const styles = { 4 | width: '100%', 5 | height: '100%', 6 | margin: '0px auto', 7 | textAlign: 'center', 8 | display: 'flex', 9 | alignItems: 'center', 10 | justifyContent: 'center', 11 | }; 12 | 13 | const SvgNoContent = props => ( 14 |
15 | 22 | 23 | 24 | 25 | 26 | 30 | 34 | 38 | 42 | 43 | 52 | 53 | 54 | 64 | 65 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 93 | 94 | 101 | 108 | 109 | 117 | 124 | 125 |
126 | ); 127 | 128 | export default SvgNoContent; 129 | 130 | -------------------------------------------------------------------------------- /NoContent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gedhean/react-no-content/18c908890052c800261b1cb5933084ca0ed5ad82/NoContent.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-no-content 2 | A SVG react component to display when there's no content. 3 | 4 | ![No Content](https://github.com/gedhean/react-no-content/blob/master/NoContent.png) 5 | 6 | ## Demo 7 | 8 | [![Edit no-content-demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/gedhean/react-no-content-demo/tree/master/) 9 | 10 | ## Thanks 11 | 12 | [Jesse Graham](https://dribbble.com/shots/2728654-Arg-There-s-no-content-here) Thanks for the inspiration. 13 | 14 | ## License 15 | 16 | [MIT](https://github.com/gedhean/react-no-content/blob/master/LICENSE.md) Enjoy it. 17 | -------------------------------------------------------------------------------- /no-content-inkspace.svg: -------------------------------------------------------------------------------- 1 | 2 | 20 | 22 | 23 | 25 | image/svg+xml 26 | 28 | 29 | 30 | 31 | 32 | 56 | 59 | 60 | 62 | 65 | 69 | 70 | 73 | 77 | 78 | 81 | 85 | 86 | 89 | 93 | 94 | 97 | 100 | 103 | 106 | 109 | 112 | 121 | 122 | 124 | 126 | 128 | 132 | 136 | 145 | 146 | 147 | 149 | 151 | 152 | 154 | 160 | 161 | 164 | 167 | 175 | 176 | 177 | 180 | 186 | 191 | 192 | 195 | 201 | 206 | 207 | 210 | 216 | 221 | 222 | 225 | 230 | 235 | 236 | 239 | 244 | 249 | 250 | 253 | 258 | 263 | 264 | 265 | 266 | 270 | 278 | 279 | 282 | 290 | 291 | 297 | 299 | 304 | 305 | 310 | 315 | 316 | 317 | --------------------------------------------------------------------------------