More UI customization

[timshaww]

Updates:

• Added border radius customization via props
• Added margin spacing between characters via props
• Added font customization for the characters via props
• Updated the demo to include all options

[timshaww]

Hey, sorry! This was just a local error — my apologies! On Apr 23, 2024, at 5:00 PM, Robin ***@***.***> wrote: @robonyong commented on this pull request.

________________________________ In src/Character/index.tsx<#41 (comment)>:

@@ -2,14 +2,14 @@ import React, { useEffect, useState } from 'react';

import Panel, { FlipPanel } from '../Panel'; import defaultSound from '../assets/flip.mp3'; -// @ts-expect-error the minified file is not in the type declarations -import { Howl } from 'howler/dist/howler.min.js'; Is this just a local conflict or are you also proposing to remove the sound playback feature? — Reply to this email directly, view it on GitHub<#41 (review)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AXDU7BMVXHM22NNKG6OPRE3Y63DVPAVCNFSM6AAAAABGU7YXGOVHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZDAMJYGI4TCNZWGI>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[robonyong]

Overall looks good, I have some concerns/preferences that I'd like addressed before pulling this in

[robonyong]

As it is I think this overlaps in function a bit with border-width. I understand why you'd want to break the character spacing away from border-width, so two requests:

1. consider renaming this prop to something more descriptive like characterSpacing, css variable name --character-spacing
2. Implement this on the wrapper level instead (https://github.com/robonyong/react-split-flap-display/blob/master/src/SplitFlapDisplay/styles.module.scss#L13) and replace the border-left with margin-left and your css variable

[robonyong]

I think this type of overall padding is best left to the parent container of this component, and not imposed by the library. please 🔪

[robonyong]

🔪