{"id":23440901,"url":"https://github.com/tedconf/react-ted-bootstrap","last_synced_at":"2025-04-13T09:20:26.246Z","repository":{"id":57164953,"uuid":"132515949","full_name":"tedconf/react-ted-bootstrap","owner":"tedconf","description":"A React-based component library for internal TED projects","archived":false,"fork":false,"pushed_at":"2024-08-31T11:03:16.000Z","size":3573,"stargazers_count":1,"open_issues_count":6,"forks_count":1,"subscribers_count":23,"default_branch":"master","last_synced_at":"2025-03-31T04:36:27.014Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://tedconf.github.io/react-ted-bootstrap/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tedconf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-07T21:00:24.000Z","updated_at":"2020-12-25T03:57:21.000Z","dependencies_parsed_at":"2024-09-24T01:12:08.315Z","dependency_job_id":"661242ac-9352-44ed-8c92-ad5289219a00","html_url":"https://github.com/tedconf/react-ted-bootstrap","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tedconf%2Freact-ted-bootstrap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tedconf%2Freact-ted-bootstrap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tedconf%2Freact-ted-bootstrap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tedconf%2Freact-ted-bootstrap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tedconf","download_url":"https://codeload.github.com/tedconf/react-ted-bootstrap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248311133,"owners_count":21082564,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-23T16:20:28.013Z","updated_at":"2025-04-13T09:20:26.223Z","avatar_url":"https://github.com/tedconf.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TED Bootstrap\n\nA React-based design system for internal TED projects.\n\n## Installation\n\n```bash\nyarn add @tedconf/react-ted-bootstrap\n```\n\n`react-ted-bootstrap` requires your project have the follow peer dependencies installed:\n- `@emotion/core`\n- `react`\n- `react-dom`\n\n## Components List\n\n* [`Alert`](#alert)\n* [`Button`](#button)\n* [`Container`](#container)\n* [`DataTable`](#datatable)\n* [`Dropdown`](#dropdown)\n* [`Gear`](#gear)\n* [`Input`](#input)\n* [`Navbar`](#navbar)\n* [`NavFlaps`](#navflaps)\n* [`NavToggle`](#navtoggle)\n* [`Select`](#select)\n* [`Spinner`](#spinner)\n* [`TwistDown`](#twistdown)\n\n### Alert\n\n```\nimport { Alert } from '@tedconf/react-ted-bootstrap';\n\nconst MyComponent = () =\u003e (\n  \u003cAlert type=\"warning\" onClose={onClose}\u003e\n    My Alert\n  \u003c/Alert\u003e\n)\n```\n\n**[⬆️ back to top](#components-list)**\n\n### Button\n\n```\nimport { Button } from '@tedconf/react-ted-bootstrap';\n\nconst MyComponent = () =\u003e (\n  \u003cButton\u003e\n    My Button\n  \u003c/Button\u003e\n)\n```\n\n**[⬆️ back to top](#components-list)**\n\n### Container\n\nBootstrap's `.container` equivalent\n\n```\nimport { Container } from '@tedconf/react-ted-bootstrap';\n\nconst MyComponent = () =\u003e (\n  \u003cContainer\u003e\n    // your code here..\n  \u003c/Container\u003e\n)\n```\n\n**[⬆️ back to top](#components-list)**\n\n### DataTable\n\n```\nimport { DataTable } from '@tedconf/react-ted-bootstrap';\n\nconst MyComponent = () =\u003e (\n  \u003cDataTable headings={headings} rows={rows} onSort={sort} /\u003e\n)\n```\n\n**[⬆️ back to top](#components-list)**\n\n### Dropdown\n\n```\nimport { Dropdown } from '@tedconf/react-ted-bootstrap';\n\nconst MyComponent = () =\u003e (\n  \u003cDropdown options={options} onClick={click} /\u003e\n)\n```\n\n**[⬆️ back to top](#components-list)**\n\n### Gear\n\n```\nimport { Gear } from '@tedconf/react-ted-bootstrap';\n\nconst MyComponent = () =\u003e (\n  \u003cGear\u003e\n    \u003cGear.Item\u003e\n      \u003ca href=\"https://ted.com\"\u003eTED.com\u003c/a\u003e\n    \u003c/Gear.Item\u003e\n  \u003c/Gear\u003e\n)\n```\n\n**[⬆️ back to top](#components-list)**\n\n### Input\n\n```\nimport { Input } from '@tedconf/react-ted-bootstrap';\n\nconst MyComponent = () =\u003e (\n  \u003cInput\n    type=\"text\"\n    placeholder=\"Text input\"\n    onChange={onChange}\n    onFocus={onFocus}\n    onBlur={onBlur}\n  /\u003e\n)\n```\n\n**[⬆️ back to top](#components-list)**\n\n### Navbar\n\n```\nimport { Navbar } from '@tedconf/react-ted-bootstrap';\n\nconst MyComponent = () =\u003e (\n  \u003cNavbar title=\"Bootstrap\" onClick={click} /\u003e\n)\n```\n\n**[⬆️ back to top](#components-list)**\n\n### NavFlaps\n\n```\nimport { NavFlaps, Tab } from '@tedconf/react-ted-bootstrap';\n\nconst MyComponent = () =\u003e (\n  \u003cNavFlaps\u003e\n    \u003cTab label=\"Tab 1\" content={\u003cComponentOne /\u003e} /\u003e\n    \u003cTab label=\"Tab 2\" content={\u003cComponentTwo /\u003e} /\u003e\n  \u003c/NavFlaps\u003e\n)\n```\n\n**[⬆️ back to top](#components-list)**\n\n### NavToggle\n\n```\nimport { NavFlaps, Tab } from '@tedconf/react-ted-bootstrap';\n\nconst MyComponent = () =\u003e (\n  \u003cNavToggle label=\"TED2019\"\u003e\n    \u003ca href=\"https://ted2019.ted.com\"\u003eTED2019\u003c/a\u003e\n    \u003ca href=\"https://ted2019.ted.com\"\u003eTED2020\u003c/a\u003e\n  \u003c/NavToggle\u003e\n)\n```\n\n**[⬆️ back to top](#components-list)**\n\n### Select\n\n```\nimport { Select } from '@tedconf/react-ted-bootstrap';\n\nconst MyComponent = () =\u003e (\n  \u003cSelect label=\"My Select\" onChange={change}\u003e\n    \u003cSelect.Item value=\"value\"\u003eSelect Item\u003c/Select.Item\u003e\n  \u003c/Select\u003e\n)\n```\n\n**[⬆️ back to top](#components-list)**\n\n### Spinner\n\n```\nimport { Spinner } from '@tedconf/react-ted-bootstrap';\n\nconst MyComponent = () =\u003e (\n  \u003cSpinner /\u003e\n)\n```\n\n**[⬆️ back to top](#components-list)**\n\n### TwistDown\n\n```\nimport { TwistDown } from '@tedconf/react-ted-bootstrap';\n\nconst MyComponent = () =\u003e (\n  \u003cTwistDown label=\"twistdown\"\u003eMy TwistDown Content\u003c/TwistDown\u003e\n)\n```\n\n**[⬆️ back to top](#components-list)**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftedconf%2Freact-ted-bootstrap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftedconf%2Freact-ted-bootstrap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftedconf%2Freact-ted-bootstrap/lists"}