https://github.com/tedconf/react-ted-bootstrap
A React-based component library for internal TED projects
https://github.com/tedconf/react-ted-bootstrap
Last synced: about 1 year ago
JSON representation
A React-based component library for internal TED projects
- Host: GitHub
- URL: https://github.com/tedconf/react-ted-bootstrap
- Owner: tedconf
- Created: 2018-05-07T21:00:24.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2024-08-31T11:03:16.000Z (almost 2 years ago)
- Last Synced: 2025-03-31T04:36:27.014Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://tedconf.github.io/react-ted-bootstrap/
- Size: 3.41 MB
- Stars: 1
- Watchers: 23
- Forks: 1
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TED Bootstrap
A React-based design system for internal TED projects.
## Installation
```bash
yarn add @tedconf/react-ted-bootstrap
```
`react-ted-bootstrap` requires your project have the follow peer dependencies installed:
- `@emotion/core`
- `react`
- `react-dom`
## Components List
* [`Alert`](#alert)
* [`Button`](#button)
* [`Container`](#container)
* [`DataTable`](#datatable)
* [`Dropdown`](#dropdown)
* [`Gear`](#gear)
* [`Input`](#input)
* [`Navbar`](#navbar)
* [`NavFlaps`](#navflaps)
* [`NavToggle`](#navtoggle)
* [`Select`](#select)
* [`Spinner`](#spinner)
* [`TwistDown`](#twistdown)
### Alert
```
import { Alert } from '@tedconf/react-ted-bootstrap';
const MyComponent = () => (
My Alert
)
```
**[⬆️ back to top](#components-list)**
### Button
```
import { Button } from '@tedconf/react-ted-bootstrap';
const MyComponent = () => (
My Button
)
```
**[⬆️ back to top](#components-list)**
### Container
Bootstrap's `.container` equivalent
```
import { Container } from '@tedconf/react-ted-bootstrap';
const MyComponent = () => (
// your code here..
)
```
**[⬆️ back to top](#components-list)**
### DataTable
```
import { DataTable } from '@tedconf/react-ted-bootstrap';
const MyComponent = () => (
)
```
**[⬆️ back to top](#components-list)**
### Dropdown
```
import { Dropdown } from '@tedconf/react-ted-bootstrap';
const MyComponent = () => (
)
```
**[⬆️ back to top](#components-list)**
### Gear
```
import { Gear } from '@tedconf/react-ted-bootstrap';
const MyComponent = () => (
TED.com
)
```
**[⬆️ back to top](#components-list)**
### Input
```
import { Input } from '@tedconf/react-ted-bootstrap';
const MyComponent = () => (
)
```
**[⬆️ back to top](#components-list)**
### Navbar
```
import { Navbar } from '@tedconf/react-ted-bootstrap';
const MyComponent = () => (
)
```
**[⬆️ back to top](#components-list)**
### NavFlaps
```
import { NavFlaps, Tab } from '@tedconf/react-ted-bootstrap';
const MyComponent = () => (
} />
} />
)
```
**[⬆️ back to top](#components-list)**
### NavToggle
```
import { NavFlaps, Tab } from '@tedconf/react-ted-bootstrap';
const MyComponent = () => (
TED2019
TED2020
)
```
**[⬆️ back to top](#components-list)**
### Select
```
import { Select } from '@tedconf/react-ted-bootstrap';
const MyComponent = () => (
Select Item
)
```
**[⬆️ back to top](#components-list)**
### Spinner
```
import { Spinner } from '@tedconf/react-ted-bootstrap';
const MyComponent = () => (
)
```
**[⬆️ back to top](#components-list)**
### TwistDown
```
import { TwistDown } from '@tedconf/react-ted-bootstrap';
const MyComponent = () => (
My TwistDown Content
)
```
**[⬆️ back to top](#components-list)**