This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

react-undraw
TypeScript icon, indicating that this package has built-in type declarations

2.0.3 • Public • Published

NPM Version CI Dependency Status Dev Dependency Status

React unDraw

React component for unDraw illustrations.

Table of Contents

Features

  • 🚀 Works with any illustration from unDraw.
  • 🎨 Customize colors with props.
  • 🎉 Written in TypeScript.
  • 🎁 Smaller bundles by only including what you need.

Installation

npm install react-undraw --save

Usage

import Undraw from 'react-undraw';

// optionally override default props
Undraw.defaultProps.primaryColor = 'darkblue';

<Undraw name="coding" />;

Props:

Prop Type Description Default
name string Illustration file name (without extension). n/a
primaryColor string Illustration primary color. #6c63ff
height string Illustration height. 250px

Illustrations

Bring your own illustrations! To comply with the updated unDraw license, we can't bundle the illustrations with this package 😞 However, this means you can always use the latest illustrations! 😎

Here's what you need to do:

  • Download any illustrations you want from unDraw.
    • No need to change the color before download, use primaryColor prop instead.
    • Optional: rename file to remove prefix/suffix (undraw_barbecue_3x93.svg => barbecue.svg).
    • The name prop will need to match your file name.
  • Put SVG files in an undraw folder at the root of your project.
  • Add react-undraw-cli to your build and/or start script:
    • "prebuild": "react-undraw-cli"
    • or ... "build": "react-undraw-cli && react-scripts build"

Example project structure:

package.json
src/
 ...
undraw/
  coding.svg
  hologram.svg
  ice_cream.svg
  ...

Development

npm install
npm run build

Package Sidebar

Install

npm i react-undraw

Weekly Downloads

366

Version

2.0.3

License

MIT

Unpacked Size

30.3 kB

Total Files

31

Last publish

Collaborators

  • justinlettau