{"id":13436443,"url":"https://github.com/pedronauck/react-simpletabs","last_synced_at":"2025-10-05T01:57:45.479Z","repository":{"id":21342167,"uuid":"24659146","full_name":"pedronauck/react-simpletabs","owner":"pedronauck","description":"Just a simple tabs component built with React","archived":false,"fork":false,"pushed_at":"2018-10-03T08:45:26.000Z","size":122,"stargazers_count":185,"open_issues_count":27,"forks_count":76,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-09-26T02:30:10.913Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pedronauck.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-09-30T23:15:08.000Z","updated_at":"2025-04-15T12:08:36.000Z","dependencies_parsed_at":"2022-08-20T19:50:11.982Z","dependency_job_id":null,"html_url":"https://github.com/pedronauck/react-simpletabs","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/pedronauck/react-simpletabs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedronauck%2Freact-simpletabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedronauck%2Freact-simpletabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedronauck%2Freact-simpletabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedronauck%2Freact-simpletabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pedronauck","download_url":"https://codeload.github.com/pedronauck/react-simpletabs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedronauck%2Freact-simpletabs/sbom","scorecard":{"id":726239,"data":{"date":"2025-08-11","repo":{"name":"github.com/pedronauck/react-simpletabs","commit":"92d048f440def64ec065e19c768ae93f974c6afd"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.4,"checks":[{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":3,"reason":"Found 8/26 approved changesets -- score normalized to 3","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 12 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-22T12:53:47.490Z","repository_id":21342167,"created_at":"2025-08-22T12:53:47.490Z","updated_at":"2025-08-22T12:53:47.490Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278399689,"owners_count":25980332,"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","status":"online","status_checked_at":"2025-10-04T02:00:05.491Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-07-31T03:00:48.399Z","updated_at":"2025-10-05T01:57:45.459Z","avatar_url":"https://github.com/pedronauck.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","Awesome React","UI Components","Demos"],"sub_categories":["Uncategorized","Tools","Tabs"],"readme":"# React SimpleTabs\n\n![Git release](http://img.shields.io/github/release/pedronauck/react-simpletabs.svg?style=flat) ![Travis](http://img.shields.io/travis/pedronauck/react-simpletabs.svg?style=flat) ![license](http://img.shields.io/npm/l/react-simpletabs.svg?style=flat)\n\n[![NPM](https://nodei.co/npm/react-simpletabs.png)](https://nodei.co/npm/react-simpletabs/)\n\n![](http://f.cl.ly/items/25263r432i1W2U3p3b2m/react-simplestabs-screenshot.png)\n\nThis is a simple `\u003cTabs\u003e` component built with ReactJS.\n\n#### See the [Demo](http://embed.plnkr.co/p6YVUK/preview).\n\n## Install\n\nInstalling this component is very easy and it has just one dependency: [React](http://facebook.github.io/react/downloads.html). So, you have a lot of options to do that:\n\n- Using NPM *~the quickest way~*\n```bash\n  $ npm install --save react-simpletabs\n```\n\n- Using Bower\n```bash\n  $ bower install --save react-simpletabs\n```\n\n- Or if you want to [download the lastest release](https://github.com/pedronauck/react-simpletabs/archive/v0.7.0.zip) and put in your website, it will work too!\n\n**NOTICE:** You need just one thing to make the component work. Put the [base component style](./dist/react-simpletabs.css) at the `\u003cheader\u003e` tag. If you don't wanna use the `.css` extension, you can get the `.styl` or `.scss` extension at the folder `./lib`.\n\nThen you're done! :smile_cat:\n\n## Usage\n\nUsing the component is simpler than installing. See an example with [browserify](http://truongtx.me/2014/07/18/using-reactjs-with-browserify-and-gulp/) to bundle your script:\n\n```javascript\n/** @jsx React.DOM */\n\nvar Tabs = require('react-simpletabs');\nvar App = React.createClass({\n  render: function() {\n    return (\n      \u003cTabs\u003e\n        \u003cTabs.Panel title='Tab #1'\u003e\n          \u003ch2\u003eContent #1 here\u003c/h2\u003e\n        \u003c/Tabs.Panel\u003e\n        \u003cTabs.Panel title='Tab #2'\u003e\n          \u003ch2\u003eContent #2 here\u003c/h2\u003e\n        \u003c/Tabs.Panel\u003e\n        \u003cTabs.Panel title='Tab #3'\u003e\n          \u003ch2\u003eContent #3 here\u003c/h2\u003e\n        \u003c/Tabs.Panel\u003e\n      \u003c/Tabs\u003e\n    );\n  }\n});\n\nReact.renderComponent(\u003cApp /\u003e, mountNode);\n```\n\nIf you decide to use just Javascript without any module loader, you can get the global variable `window.ReactSimpleTabs` *(or just `ReactSimpleTabs`)*:\n\n```javascript\n  /** @jsx React.DOM */\n\n  var Tabs = ReactSimpleTabs;\n  var App = React.createClass({\n    render: function() {\n      ...\n    }\n  });\n```\n\n##### `\u003cTabs.Panel\u003e`\n\nWell, the `Tabs.Panel` component is a [namespaced component](http://facebook.github.io/react/blog/2014/07/17/react-v0.11.html#jsx) of the `Tabs`, this is easiest way and you avoid to declare a bunch of variables.\n\n**NOTE:** It is required that you put the `title` property to the `Tabs.Panel` component. Without this, the component won't work, ok?\n\n## Behind the Scene\n\nThere are some things that you should know about the component. The first one is the structure created inside by the component if you wish to stylize it.\n\nSo, the semantic HTML structure will be something like this:\n\n```html\n  \u003cdiv class='tabs'\u003e\n    \u003cnav class='tabs-navigation'\u003e\n      \u003cul class='tabs-menu'\u003e\n        \u003cli class='tabs-menu-item is-active'\u003eTab #1\u003c/li\u003e\n        \u003cli class='tabs-menu-item'\u003eTab #2\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/nav\u003e\n    \u003carticle class='tab-panel'\u003e\n      The content of active panel here\n    \u003c/article\u003e\n  \u003cdiv\u003e\n```\n\nThis is a very simple structure to stylize however you want. So, if you are lost, don't panic, there is a [real functional example](/example) that you can follow.\n\nThe other thing that I have to share with you is that the component has some properties that you can use. Example:\n\nIf you want to set a default tab active you can use the `tabActive` property:\n\n```javascript\n  ...\n  render: function() {\n    return (\n      \u003cTabs tabActive={2}\u003e\n        ...\n      \u003c/Tabs\u003e\n    );\n  }\n  ...\n```\n\nAnd if you want to do something before or after the changed tab, you can do use the `onBeforeChange` or `onAfterChange` property (or both together):\n\n```javascript\n  ...\n  handleMount: function(selectedIndex, $selectedPanel, $selectedTabMenu) {\n    console.log('on mount, showing tab ' + selectedIndex);\n  },\n  handleBefore: function(selectedIndex, $selectedPanel, $selectedTabMenu) {\n    console.log('Something before tab ' + selectedIndex);\n  },\n  handleAfter: function(selectedIndex, $selectedPanel, $selectedTabMenu) {\n    console.log('Something after tab ' + selectedIndex);\n  },\n  render: function() {\n    return (\n      \u003cTabs\n        tabActive={2}\n        onBeforeChange={this.handleBefore}\n        onAfterChange={this.handleAfter}\n        onMount={this.handleMount}\u003e\n        ...\n      \u003c/Tabs\u003e\n    );\n  }\n  ...\n```\n\nFor more details, check out the API below.\n\n## Component API\n\n`\u003cTab\u003e` component:\n\nProperty | Type | Default | Required | Description\n-------- | ---- | ------- | -------- |-----------\nclassName | `Array\\|Object\\|String` | n/a | no | Additional class names for wrapping div\ntabActive | `Number` | 1 | no | The default tab active\nonMount | `Function` | n/a | no | The function that will be executed when the component is mounted\nonBeforeChange | `Function` | n/a | no | The function that will be executed **before** the state of the component change. Return `false` to cancel the change to the active tab.\nonAfterChange | `Function` | n/a | no | The function that will be executed **after** the state of the component change\n\n`\u003cTab.Panel\u003e` component:\n\nProperty | Type | Default | Required | Description\n-------- | ---- | ------- | -------- |-----------\ntitle | `String` | n/a | yes | The title that will generate the *tab menu items*\n\n## Contributing\n\nAnyone can help make this project better - check out the [Contributing guide](CONTRIBUTING.md)!\n\n## License\n\nSee the [License](LICENSE) file.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpedronauck%2Freact-simpletabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpedronauck%2Freact-simpletabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpedronauck%2Freact-simpletabs/lists"}