mohux / react-brackets Goto Github PK

getting below error while running npm ci

next_blix_gg git:(main) npm ci
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"18.2.0" from the root project
npm ERR!   peer react@">=18" from @chakra-ui/[email protected]
npm ERR!   node_modules/@chakra-ui/accordion
npm ERR!     @chakra-ui/accordion@"2.1.2" from @chakra-ui/[email protected]
npm ERR!     node_modules/@chakra-ui/react
npm ERR!       @chakra-ui/react@"^2.3.7" from the root project
npm ERR!       1 more (chakra-ui-markdown-renderer)
npm ERR!   89 more (@chakra-ui/alert, @chakra-ui/checkbox, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0" from [email protected]
npm ERR! node_modules/react-brackets
npm ERR!   react-brackets@"^0.4.7" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@"^17.0.0" from [email protected]
npm ERR!   node_modules/react-brackets
npm ERR!     react-brackets@"^0.4.7" 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 /Users/ayushsingh/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/ayushsingh/.npm/_logs/2022-12-09T09_54_03_918Z-debug-0.log
➜  next_blix_gg git:(main) 

Below is my package.json

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@chakra-ui/react": "^2.3.7",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "chakra-ui-markdown-renderer": "^4.1.0",
    "framer-motion": "^6.5.1",
    "gray-matter": "^4.0.3",
    "markdown-it": "^12.3.2",
    "next": "13.0.1",
    "react": "18.2.0",
    "react-brackets": "^0.4.7",
    "react-dom": "18.2.0",
    "react-icons": "^4.6.0",
    "react-swipeable-views": "^0.14.0"
  }
}

Hello and thank you for making such a nice looking library.

I am trying to get this working with React Native. I was hoping someone could give me some hints on how to get started. I tried getting the minimal first example working but it is breaking my build, and I don't have experience getting web libraries working on mobile.

hi i interest in this repository because now i looking for easy way to generate bracket for esport web apps project, theres a seed in this react-brackets library, but may i know is there a custom seed can added in the seed ?, maybe add the winner or the loser status ?

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.

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) => {}}/>

Hey guys, is there an url for demo?

Found this issue below with demo and fixed it, I'll see if I can fork the repo and checkin, but in the meantime I have also mentioned the fix below

Issue -

/BracketGenerator.d.ts
(22,63): Type 'keyof T' does not satisfy the constraint 'string'.
  Type 'string | number | symbol' is not assignable to type 'string'.
    Type 'number' is not assignable to type 'string'.

Fixed BracketGenerator.d.ts

export declare type Diff<T extends string | number | symbol, U extends string> = ({
    [P in T]: P;
} & {
    [P in U]: never;
} & {
    [x: string]: never;
})[T];
export declare type Omit<T, K extends string> = Pick<T, Diff<keyof T, K>>;

Hey mate, great work!

I just cloned the repo to check it out and ran the example as suggested in the main README.
It doesn't run out of the box with there being 2 issues:

1. Wrong definition of the RenderSeedProps or wrong restructuring of it in the losing-brackets.tsx (breaks double elim)
   Its defined as "roundIndex", but used as "roundIdx"
2. I am not sure how you are trying to get the index of the current "isLineConnector" again in the losing-brackets.tsx (breaks double elim), but it is always undefined there for it cant get the seed length. It generally works if you add a value, like 1.

Installed using npm. This happens when running start on my project.

TypeScript error in {project}/node_modules/react-brackets/dist/index.d.ts(3,1):
Declaration or statement expected.  TS1128

    1 | export { default as Bracket } from './brackets';
    2 | export { Seed, SeedTeam, SeedItem, SeedTime, SingleLineSeed } from './components/seed';
  > 3 | export type { SingleEliminationProps } from './brackets';
      | ^
    4 | export type { SeedProps, SeedTimeProps } from './components/seed';
    5 | export type { RoundProps } from './components/round';
    6 | 

how to show which team is winner in the bracket to be clear

Error Message: "react-dom.development.js:86 Warning: Legacy context API has been detected within a strict-mode tree.

The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.

Please update the following components: ReactSwipableView"

throws off formatting when on mobile and im not sure how to center my team names to where they are viewable

Hi, great library dude!.

I'm trying to start to use this library and one thing I've noticed missing is two sided bracket, is there a way to create two sided bracket like this:

If you haven't been added this, what do you think about adding it? thanks :D

Hi guys, this is a great package and I would love to use it on a project of mine, however, my project requires the lines to be editable. For more context, I need to be able to color the lines when a user hovers over a team to clearly see how they got to where they are now.
Hope you guys get around to open up more customisation in that regard.

how to use in reactjs ?

Warning: Encountered two children with the same key, `1`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version. in div (created by styled.div) in styled.div (created by SingleElimination) in div (created by styled.div) in styled.div (created by SingleElimination) in div (created by ReactSwipableView) in div (created by ReactSwipableView) in div (created by ReactSwipableView) in ReactSwipableView (created by SingleElimination) in div (created by styled.div) in styled.div (created by SingleElimination) in SingleElimination (at wining-bracket.tsx:29) in WiningBracket (at double-elimination/index.tsx:112) in div (at double-elimination/index.tsx:111) in DoubleElimination (at App.tsx:17) in div (at App.tsx:8) in App (at src/index.tsx:7)

Could you please provide an example data to generate double elimination bracket.
That would be really helpfull

I want to achieve something related to this libraries design and animation and flow. So can I use this library with the react native.
If not then there any alternate library for this type of design.
I am attaching this video, that is exact i want to achieve.

I want to be able to scroll horizontally on mobile and not change the view to a column layout

How can I do that

`const CustomSeed = ({ seed, breakpoint, roundIndex, seedIndex }) => (

const Component = () => (

<Bracket
rounds={rounds}
roundTitleComponent={(title) => (