dapi-labs / react-nice-avatar Goto Github PK

you have no overlap between directory names and make commands, so you don't need phony. It doesn't do anything here. Like this

.PHONY lint

Only matters if you had an actual directory named lint, whether ignored or not

The phony lines help if you actually had a directory called build and if you ran make build you would get unexpected reused because make would look at the directory, which is independent of the make command.

When setting sex: "woman", the eyelashes sometimes just vanish, resulting in no visible difference between male and female avatars.

when i'm using this method to generate man avatar it is also generating female avatar sometimes..
is this the correct way of doing it or am i doing something wrong ?
Please help me with this
const config = genConfig({ sex: "man" })

Hi there!
I want to use avatar as a default profile picture of the user. However, I cannot fix the avatar to the username since getConfig() does not have a seed parameter. It would be great to have it.

Example: https://avatars.dicebear.com/styles/miniavs

Would be nice to export the created avatar to an svg, which then could be rendered for different environments (e. G. react-native)

If using using inside of a text-align center container, a wrapping container w/ text-align left seems to be needed to prevent layout issues:

w/o fix

w/ fix

Using with next.js v14 with app router, in server component do:

<div className="flex text-xs md:text-md gap-4">
  <Avatar className="flex-none w-10 h-10" {...genConfig(reply.author.id)} />
  <div>{reply.author.name}</div>
</div>

got error:

Server Error

TypeError: Super expression must either be null or a function
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
_inherits
node_modules\.pnpm\@[email protected]\node_modules\@babel\runtime\helpers\inherits.js (4:1)
eval
node_modules\.pnpm\[email protected][email protected]\node_modules\react-nice-avatar\dist\index.esm.js (1:49315)
eval
node_modules\.pnpm\[email protected][email protected]\node_modules\react-nice-avatar\dist\index.esm.js (1:50773)
(rsc)/./node_modules/.pnpm/[email protected][email protected]/node_modules/react-nice-avatar/dist/index.esm.js

Maybe need to look at this code?

Downloaded avatar images are 361x445 rather than matching what appears to be 350x350 for the avatars.

Example download:

Out of date: https://www.npmjs.com/package/react-native-nice-avatar

Hi !

First of all thanks for you work, it's a very nice and useful open source project.

I wanted to know if you have planned to extends the library with some new hairs, hats or shirts style ?
I know i could do it myself but it won't be as good as your work.

Editor shown in demo app - https://nice-avatar.dapi.to/

can we please configure the code and export this editor in package as this looks pretty good

When Clicked this link -> https://nice-avatar.chilllab.io/
At initial render, Even the sex option is changed Avatar is not rendering the selected gender.

Expected behaviour:
When selected male should be able to see male avatar.

Since there would be nice to use it either in a node.js backend or react-native environment it would be nice to export a avatar to an image like png.

Just an idea to make your Makefile lighter to follow.

If you use npx, then you can execute files in node_modules/bin directly.

e.g.

$ npm i eslint

$ npx eslint --fix

So Makefile can be like this, without setting up the bin path.

lint:
  npx eslint --fix

Hey there. I just recently found your package and am totally in love with it.

Once it's a pretty major facial feature - are there any plans to add bears soon?

Any particular reason why the mohawk.js and thick.js in src/hair has code :
mainColor = colorRandom && color || "#171921"; ?

All the other styles just have: const { color } = props;
The other styles work fine.
'mohawk' and 'thick' seem to reset the haircolor to 'black' or #171921 in my project.

Also, the demo on https://nice-avatar.chilllab.io/ works fine.
What react-nice-avatar version is the demo running?

Locally the package works fine in Vite React Typescript.. However, getting error with getConfig().
TypeError: propTypes$1.exports.arrayOf is not a function. (In 'propTypes$1.exports.arrayOf(propTypes$1.exports.node)', 'propTypes$1.exports.arrayOf' is undefined)

My Code:

import Avatar, { AvatarFullConfig, genConfig } from 'react-nice-avatar'

{...}

const [firstPlayerAvatar, setFirstPlayerAvatar] = useState<AvatarFullConfig>({})

useEffect(() => {
    setFirstPlayerAvatar(
      genConfig({
        bgColor: 'transparent',
      })
    )
  }, [])

{...}

 <Avatar
    {...firstPlayerAvatar}
    style={{ width: '7rem', height: '7rem' }}
 />

{...}

On localhost it works

In production it doesn't work, error message:

Uncaught Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

full code: https://github.com/rhuangabrielsantos/dots-game
production: https://dots-game.vercel.app/

I use vite with reactjs

Help me :(

Hello guys,

First of all, really nice job! I loved the avatars and their stylings.

I am developing a react web app using your avatar, I follow the implementation guide, but and it worked.
I could build and run locally my web app and all work fine.
But when I deploy into Netlify, I am getting the follow error when I open the app:

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

After some tests, I remove the uses of this lib, and when I remove all work properly.
I did same reseach and I think it's something about the default export of the component.

Here is my implementation:

• Importation

import ReactNiceAvatar, { genConfig, NiceAvatarProps } from 'react-nice-avatar';

• My Component

`
export function UserAvatar({ ...rest }: AvatarProps) {

const { userData } = useAuthentication();

const { isOpen, onClose, onOpen } = useDisclosure();


const config = {
    "sex": 'man',
    "faceColor": '#E5B5A1',
    "earSize": 'small',
    "hairColor": '#000',
    "hairStyle": 'normal',
    "hatStyle": 'none',
    "hatColor": '#000',
    "eyeStyle": 'oval',
    "noseStyle": 'short',
    "mouthStyle": 'smile',
    "shirtStyle": 'short',
    "glassesStyle": 'none',
    "hairColorRandom": false,
    "isGradient": false,
    "shape": 'circle',
    "shirtColor": theme.colors.sarsil.orange,
    "bgColor": theme.colors.gray[50]
} as NiceAvatarProps;

const myConfig = genConfig(config);

return (
    <Flex
        as='button'
        cursor='pointer'
        onClick={onOpen}
    >
        {!!userData?.avatar ? (
            <Box
                w='15rem'
                h='15rem'
                bgColor='gray.50'
                borderRadius='50%'
                boxShadow='md'
                p='1px'
                {...rest}
            >
                {!!myConfig && (
                    <ReactNiceAvatar
                        style={{ width: '100%', height: '100%' }}
                        {...myConfig}
                    />
                )}
            </Box>
        ) : (
            <Center borderRadius='50%' p='4' bgColor='gray.50'>
                <Icon as={HiOutlineUser} fontSize='1.5rem' color='sarsil.orange' />
            </Center>
        )
        }
        <AvatarModal isOpen={isOpen} onClose={onClose} />
    </Flex >
);

}
`

When I try to reload the page it give me this annoying error and I spent days how to fix it

client.js:1 Warning: Prop id did not match. Server: "mask2091363" Client: "mask5678949"
at mask

I want to use avatar as a default profile picture of the user

By using expo-svg you could enable the support for react-native

Is there currently a solution to pass in sex + seed. I want to create an avatar off a unique seed but I know the sex. That way the avatar will be sex proper (as I have that info) but then use unique id to generate the other appearance props.

These rows should all be removed from .gitignore.

!.gitignore
!.npmignore
!.eslintignore
!.travis.yml
!.babelrc
!.eslintrc

Using ! means don't ignore, but if those are not ignored with a prior rule then there is no point to list them.

It would be nice to have many different head positions so that they don’t look all the same. Is this in the scope of this project or already possible?