mohux / react-brackets

Reusable and customizable react brackets component, you can use it to build components such as single elimination, or double elimination brackets
105 stars 47 forks source link

Add callback method from CustomSeed to Bracket #10

Open orieuxe opened 3 years ago

orieuxe commented 3 years ago

Great library !

Use case : If one seed of the bracket is clicked, I would like to display the list of games attached to that match at the right of the page. image

I couldn't find a way to pass a setter as prop from the Bracket to my CustomSeed component.

actual code : <Bracket rounds={winnerRounds} renderSeedComponent={CustomSeed} />

what i idealy hoped for :) : <Bracket rounds={winnerRounds} renderSeedComponent={CustomSeed} onSeedClick={(seed) => {}}/>

mohammadou1 commented 3 years ago

Hi buddy, thank you so much! Why dont you use onClick inside customSeed component though? Since its just a component you use onClick inside it, plus you can pass any additional data in the seed object

orieuxe commented 3 years ago

Thanks, i know i can put an onClick inside of CustomSeed. But i need the parent component CustomBracket, located in a another file, to receive that event. I ended up using reactn global state management to pass the event inside CustomSeed

const onSeedClicked = () => {
    setGlobal({
    selectedMatch: m,
    })
}

and inside CustomBracket

const [selectedMatch] = useGlobal('selectedMatch')

useEffect(() => {
    //displaying games...
}, [selectedMatch])

Although i'm not very satisfied with this solution, feel free to close this issue

mohux commented 3 years ago

This way it will end up passing onClick prop to CustomSeed coming from Bracket as well, which will end the same result, but ok i might add it in next release to help you more,

Next release will be a breaking change from this one but its gonna take time to do.

humarkx commented 2 years ago

Imo @orieuxe onMouseOver gives better UI, since you don't actually need to click :)