justinlettau / react-undraw Goto Github PK
View Code? Open in Web Editor NEWReact component for unDraw illustrations.
React component for unDraw illustrations.
What kind of issue is this?
[x] Bug report.
[ ] Feature request.
Can't execute react-undraw-cli
I have manually write path to .bin folder
Install current version using yarn on Debian OS
Would be really great to be able to put the undraw
folder anywhere out of root
, and set a custom path to it
What kind of issue is this?
[x] Bug report.
[ ] Feature request.
The react-undraw-cli
throw this:
(node:5996) UnhandledPromiseRejectionWarning: Error: Command failed: tsc -p ./tsconfig.json
(node:7172) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
Catching that error and logging it, the correct error was:
src/undraw/Undraw.test.tsx(2,22): error TS7016: Could not find a declaration file for module 'react-dom'. '<myproject>/node_modules/react-dom/index.js' implicitly has an 'any' type.\r\n Try
npm install @types/react-dom
if it exists or add a new declaration (.d.ts) file containingdeclare module \'react-dom\';
\r\nsrc/undraw/Undraw.test.tsx(6,1): error TS2582: Cannot find name 'it'. Do you need to install type definitions for a test runner? Trynpm i @types/jest
ornpm i @types/mocha
.
At this point, it should generate the components,
mkdir react-undraw-issue
cd react-undraw-issue
npm i [email protected]
(the error appears here too)"undraw": "react-undraw-cli",
in scripts
of package.json
npm run undraw
After installing those @types/...
in _phantomChildren
field of package.json
of your project, it creates the components as should.
EDIT: idk any more what I did to make it work
Hello,
What kind of issue is this?
[ ] Bug report.
[x] Feature request.
I'd like to apply extra styles to the svg illustration but there is no way to pass a className or style prop.
Is it possible to add them?
What kind of issue is this?
When using an SVG downloaded with a different color besides the default unDraw color (#6C63FF), the primaryColor
prop doesn't work.
The primaryColor
prop should replace whatever color was in the original SVG file.
npm install
and npm build
primaryColor
propIt looks like the problem is in build.js where it replaces the SVG attributes based on the default unDraw hex code. Haven't looked into this yet but a possible fix could be first finding the hex code that is in the same location as the default hex code, then using that in replaceAttrValues
.
Hello,
is there a way to directly require each illustration?
I think using the <Undraw name="coding" />
approach will include all the illustrations in the bundle with no tree shaking?
What kind of issue is this?
Currently, only an es6 bundle is exported. Would be nice if there could also be a non es6 bundle that would play nicer when using this in environments that are not ready for es6 without having to compile this specific module.
[x] Bug report.
[] Feature request.
I Downloaded the svg file from undraw repo website, created a folder called undraw
in the project root, renamed the svg to remove the suffix, prefix, and tried to render the svg with
<Undraw
name="signin"
/>
i've put the "react-undraw-cli" in start and build scripts.
The svg is not rendering., nothing happens.
SVG being rendered.
One fact is that i've tried to run yarn react-undraw-cli
, but it seems that the cli command is not working.
Pieces of code:
const Signin: React.FC = () => {
return (
<div>
<Undraw
name="test"
/>
</div>
);
}
"scripts": {
"start": "react-scripts start && react-undraw-cli",
"build": "react-scripts build && react-undraw-cli",
"test": "react-scripts test",
"eject": "react-scripts eject",
"prebuild": "react-undraw-cli"
},
The repo is actually public, that's an open source project, you can also check there if want to.
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These updates are currently rate-limited. Click on a checkbox below to force their creation now.
react
, react-dom
)These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
@types/jest
, jest
, ts-jest
)These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.
.github/workflows/ci.yml
actions/checkout v3
package.json
@svgr/core ^5.3.0
@svgr/plugin-jsx ^5.3.0
@svgr/plugin-prettier ^5.3.0
@svgr/plugin-svgo ^5.3.0
@types/jest ^25.1.4
@types/node ^12.12.32
@types/react ^16.9.27
@types/react-dom ^16.9.5
app-root-path ^3.0.0
del ^5.1.0
fs-extra ^9.0.0
glob ^7.1.6
pascal-case ^3.1.1
prop-types ^15.7.2
husky ^4.2.3
jest ^25.2.4
prettier ^2.0.2
pretty-quick ^2.0.1
react ^16.13.1
react-dom ^16.13.1
standard-version ^7.1.0
ts-jest ^25.2.1
tslint ^6.1.0
tslint-config-prettier ^1.18.0
tslint-react ^4.2.0
typescript ^3.8.3
react ^16.5.2
react-dom ^16.5.2
What kind of issue is this?
[x] Bug report.
[ ] Feature request.
Added import Undraw from 'react-undraw'
to a page and i get the error.
Module error should not occur given that react-undraw is on package.json.
npm install react-undraw
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.