HI @miukimiu
Is it possible to use just the eyes and mouth as an overlay on a background image?

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?

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.

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?

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.

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

Hi. I noticed the instructions say to install this module with npm install --save-dev. Shouldn't this be npm install?

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 lowercasehoverstate 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 lowercaseshowtextonhover instead. If you accidentally passed it from a parent component, remove it from the DOM element.

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

Hi!

This is amazing!

Are you gonna make any more components? Want help?

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

Hi! This library work with React Native?

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!

Design:
https://invis.io/ASMQP3GD8TB#/293382879_React-Kawaii_Landing

This one is so cute for videogames. :)

https://codepen.io/Nancy_GTR/pen/zbeqKj

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:

• Maybe lots of emoji faces are out of scope of kawaii as they are not exactly "cute".
• The more the faces the bigger the file. Maybe it leads to an unreadable Face component in the end.

Cheers!

The Speech Bubble is not working as expected.

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,

It would be nice to have sleepy and dizzy faces :)

Maybe I could contribute

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?

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.

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.

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. :(

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?

@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

The warning

(https://github.com/miukimiu/react-kawaii/blob/master/src/common/wrapper/Wrapper.jsx#L62)

Possible workaround

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
}

It's hard to accept that the cutest docs ever don't have a dino favicon 😸