miukimiu / react-kawaii Goto Github PK
View Code? Open in Web Editor NEWCute SVG React Components
Home Page: https://react-kawaii.vercel.app/
License: MIT License
Cute SVG React Components
Home Page: https://react-kawaii.vercel.app/
License: MIT License
Hi,
I have been adding some "kawaii-ness" to a typescript project that I am working on, but have run into a small problem - there is no TypeScript declaration file for react-kawaii. I have built a custom declaration file that defines only the components that I am using as a work-around. Are there any plans to add a declaration file in the near future?
@miukimiu can we have a kawaii face with an animation so we can use it in loading screens? For example when uploading a file to a server.
Thanks
I understand that some character might have different faces. But for those that share the same, it would be good to have a separated component to avoid duplicated code.
If there isn't a reason to each character having its own implementation, I would gladly do a PR for it.
Hey since React 18.3 is removed defaultProps, I would think it will be better to change it to regular javascript default params so the error would go away, I am okay with working on it if you assign it to me.
I went to the page at https://react-kawaii.now.sh/ and saw a cute dinosaur, but couldn't find it as one of the components. :(
My native react app keep crashed.
After a few days of debugging, I realized that this was caused by the lack of id attribute on the Mask tag of SpeechBubble
<Mask fill="#fff">...
I think that on new versions of react-native-svg the id-attribut is required for the Mask
react-native-svg: 12.1.1
To install react-kawaii
when using the two latest major releases of react requires you to use npm install react-kawaii --legacy-peer-deps
. It would be great if we could bump dependency requirements so it can be installed by npm install react-kawaii
. I can supply a PR!
Hi. I noticed the instructions say to install this module with npm install --save-dev
. Shouldn't this be npm install
?
Currently because of the way this library is packaged as UMD, importing any component from the library will cause the all components to be imported. It would be great if the components can also be built as ES6 and made available under the modules
entry point in package.json
so that ES6 aware bundlers can shake away unused components.
Extend elements so they take props like eyes, mouth and nose in order to extend animations to control each element more accurately.
I suppose using a className to target each element works, but it's not declarative nor dynamic.
What do you think?
Apologies if this is already implemented but I couldn't find any documentation on how to animate and the cds link is broken
How does one resolve this dependency error in order to use react-kawaii
$ npm i react-kawaii
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"15.3.0 - 16.x" from [email protected]
npm ERR! node_modules/react-kawaii
npm ERR! react-kawaii@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /home/kingram/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/kingram/.npm/_logs/2021-03-30T02_46_24_195Z-debug.log
(https://github.com/miukimiu/react-kawaii/blob/master/src/common/wrapper/Wrapper.jsx#L62)
1. Accept any type of value
{
style: PropTypes.any
}
2. Using a complex rule
{
style: PropTypes.objectOf(
PropTypes.oneOfType([
PropTypes.string, PropTypes.number
])
)
}
3. Using a third-party module
https://www.npmjs.org/package/react-style-proptype
{
style: stylePropType
}
The repo currently has both yarn.lock and package-lock.json. It is not a good idea to use both since they may go out of sync - can I check which is preferred, and have the lockfile used by the other package manager deleted?
Hi,
It would be nice to have sleepy and dizzy faces :)
Maybe I could contribute
Hi @miukimiu !
I was spinning around here and came into my mind the idea of using some of the kawaii components but with a kind of dizzy or shocked face (like for a 404 error page or something). Right after I realized that it would be awesome to have a full emojipedia faces styled available in this project.
That for, I would like to add some new styled faces to it.
My doubts are:
Cheers!
Chrome console errors while running "react": "^16.3.2":
index.js:2178 Warning: React does not recognize the
hoverStateprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase
hoverstate instead. If you accidentally passed it from a parent component, remove it from the DOM element.
React does not recognize the
showTextOnHoverprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase
showtextonhover instead. If you accidentally passed it from a parent component, remove it from the DOM element.
Hello :)
When using the library with Expo like so:
expo init kawaiitest
cd kawaiitest
yarn add https://github.com/miukimiu/react-kawaii.git#new-site-and-react-native
Adding this to the main page:
import { Planet } from 'react-kawaii/native';
const Example = () => <Planet size={200} mood="blissful" color="#FDA7DC" />;
There is an import error on this line:
If you modify that line to read:
import paths from 'react-kawaii/src/components/common/face/paths';
Everything works fine, am I importing things wrong or is this a bug?
Hello,
Thank you for this great library.
Our musical startup uses it in an open-source project named OpenJam. :)
Speaking of music, would it be possible to add a musical instrument? I imagined a paperclip / trombone like Microsoft's Clippy... or maybe a synthesizer.
What do you think?
Hi!
This is amazing!
Are you gonna make any more components? Want help?
This one is so cute for videogames. :)
Currently the package blows up when importing on a server-side rendered framework such as Nextjs.
ReferenceError: window is not defined
I am also curious about the dependency on the window object considering that its just a "dumb" component. @miukimiu I'll investigate this soon.
Hi! This library work with React Native?
HI @miukimiu
Is it possible to use just the eyes and mouth as an overlay on a background image?
I'm trying to use this in a Next.js project and I can't because window
is not defined in development. There's certainly ways around this. It looks like this issue has been addressed in later versions of your package, but the later versions haven't been updated.
Is there any chance you could upload the latest version to NPM?
Hi, first let me say thanks for the great library!
As you can see in this sandbox, unlike any other component, File
is not centered (contains a lot of whitespace on its right). Is there any way to remove the whitespace programmaticaly?
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.