How to add border radius on react-jdenticon component?

Question

Tried to add border radius but it seems that it can not take the css styling on svg or canvas element.

Any suggestions for this?

import React from 'react';
import Jdenticon from 'react-jdenticon';

function Example(){
  return(<Jdenticon size="48" value="Hello World" />);
}

score 1 · Answer 1 · answered Oct 20 '21 at 12:42

1

If you want to customize the css styling on SVG images. I would suggest you to use the jdenticon package for this purpose. Using the jdenticon build a custom component with the following code. Now you can add the CSS classes or any styling to SVG element which you wants to add.

import React, { useRef, useEffect } from 'react';
import jdenticon from 'jdenticon';

const Jdenticon = ({ value = 'test', size = '100%', className }) => {
  const icon = useRef(null);
  useEffect(() => {
    jdenticon.update(icon.current, value);
  }, [value]);

  return (
    <div>
      <svg data-jdenticon-value={value} height={size} ref={icon} width={size} className={className} />
    </div>
  );
};

Now for the usage, you can use it in this way.

function Usage(){
  return(<Jdenticon size="48" value="Hello World", className="custom-name" />);
}

answered Oct 20 '21 at 12:42

Arslan Ali

408
1
6
16

can we use `import Jdenticon from 'react-jdenticon';` instead of `import jdenticon from 'jdenticon';` – Panayiotis Georgiou Oct 25 '21 at 12:28
1

No basically, now you're using the `jdenticon` library directly. So remove the `react-jdenticon` from your code. And only install the `jdenticon`. – Arslan Ali Oct 26 '21 at 20:10
Can you create another example without using `useRef and useEffect ` ? – Panayiotis Georgiou Oct 27 '21 at 10:31
1

you means using the class components? – Arslan Ali Oct 27 '21 at 22:56
Yes with class components – Panayiotis Georgiou Oct 29 '21 at 06:50
Ok I will create it for you. – Arslan Ali Oct 29 '21 at 08:10

score 0 · Answer 2 · answered Oct 21 '21 at 12:41

0

The above solution works for jdenticon package

but is there any solution for react-jdenticon maybe we can extend

<Jdenticon size="48" value="Hello World" 'pass classname here'/>

answered Oct 21 '21 at 12:41

Panayiotis Georgiou

1,135
3
19
36

How to add border radius on react-jdenticon component?

2 Answers2