Skip to content

Updating readme.md #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Updating readme.md #26

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c33e704
updated data types & spelling in README.md
Oliver-Looney Jun 25, 2023
025ee34
added headings and loading example
Oliver-Looney Jun 25, 2023
b4d1e52
merged master into updating_README.md branch to resolve merge conflicts
Oliver-Looney Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 46 additions & 11 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,14 @@ yarn add --save react-brackets

## Usage

### Basic Example

The simplest usage of this component is

```jsx
import { Bracket, RoundProps } from 'react-brackets';
import { Bracket, IRoundProps } from 'react-brackets';

const rounds: RoundProps[] = [
const rounds: IRoundProps[] = [
{
title: 'Round one',
seeds: [
Expand Down Expand Up @@ -65,12 +67,14 @@ const Component = () => {
};
```

### Custom Title

The core shape is similar to the above, since we can customize seeds and titles, you can pass any additional data to a seed or treat the title as a component.

modifying a title of the round is so simple,

```jsx
import { Bracket, RoundProps } from 'react-brackets';
import { Bracket, IRoundProps } from 'react-brackets';
import React from 'react';

const Component = () => {
Expand All @@ -86,16 +90,18 @@ const Component = () => {
};
```

### Custom Seed

Customizing a seed on the other hand is a little bit more complicated, yet still easy,
because we need to let the bracket tree to have a consitent design
because we need to let the bracket tree to have a consistent design

**Any additional data you pass inside a seed object is accessibile via renderSeedComponent**
**Any additional data you pass inside a seed object is accessible via renderSeedComponent**

```jsx
import { Bracket, RoundProps, Seed, SeedItem, SeedTeam, RenderSeedProps } from 'react-brackets';
import { Bracket, IRoundProps, Seed, SeedItem, SeedTeam, IRenderSeedProps } from 'react-brackets';
import React from 'react';

const CustomSeed = ({seed, breakpoint, roundIndex, seedIndex}: RenderSeedProps) => {
const CustomSeed = ({seed, breakpoint, roundIndex, seedIndex}: IRenderSeedProps) => {
// breakpoint passed to Bracket component
// to check if mobile view is triggered or not

Expand All @@ -118,13 +124,15 @@ const Component = () => {
};
```

### Double Elimination

How about if I want to use this component for double elimination losing bracket? the current Seed component only works on single elimination, the answer is fairly simple as well.

```jsx
import { Bracket, RoundProps, Seed, SingleLineSeed, SeedItem, SeedTeam, RenderSeedProps } from 'react-brackets';
import { Bracket, IRoundProps, Seed, SingleLineSeed, SeedItem, SeedTeam, IRenderSeedProps } from 'react-brackets';
import React from 'react';

const CustomSeed = ({seed, breakpoint, roundIndex, seedIndex}: RenderSeedProps) => {
const CustomSeed = ({seed, breakpoint, roundIndex, seedIndex}: IRenderSeedProps) => {
// ------ assuming rounds is the losers brackets rounds ------
// losers rounds usually got some identical seeds amount like (2 - 2 - 1 - 1)

Expand Down Expand Up @@ -183,11 +191,38 @@ const Component = () => {
};
```

### Loading

```jsx
import { Bracket, IRenderSeedProps, Seed, SeedItem, SeedTeam, SeedTime } from 'react-brackets';

const CustomSeed = ({ seed, breakpoint }: IRenderSeedProps) => {
return (
<Seed mobileBreakpoint={breakpoint} className='test'>
<SeedItem className='skeleton-item'>
<div>
<SeedTeam>.</SeedTeam>
<SeedTeam>.</SeedTeam>
</div>
</SeedItem>
<SeedTime mobileBreakpoint={breakpoint} style={{ fontSize: 9 }}>
{seed.date}
</SeedTime>
</Seed>
);
};

const Component = () => {
//....
return <Bracket rounds={rounds} renderSeedComponent={CustomSeed} />;
};
```

## Bracket Props

| Prop | Type | Description |
|---------------------| -------------------- |--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| rounds | RoundProps[] | Array of rounds, each round has {title,array of seeds}, if you're not using a custom seed render, each seed needs an array of teams, each team should have a name |
| ------------------- |----------------------| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| rounds | IRoundProps[] | Array of rounds, each round has {title,array of seeds}, if you're not using a custom seed render, each seed needs an array of teams, each team should have a name |
| mobileBreakpoint | number | This bracket supports responsive design, on window reaching this size, it will trigger mobile swipable view, if you want to disable it, you can pass 0, (default is 992) |
| rtl | boolean | Direction of the bracket as RTL (default is LTR) |
| twoSided | boolean | Sets Single elimination to be two sided if true. Default is False |
Expand Down