Package Health Score

52 / 100

security
Security review needed
popularity
Limited
maintenance
Inactive
community
Sustainable

Explore Similar Packages

Security

Security review needed

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

Version				Vulnerabilities	License Risk
9.6.8	\|	08/2019	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

MIT

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Limited

Weekly Downloads (3)

GitHub Stars: 565
Forks: 232
Contributors: 80

Direct Usage Popularity

The npm package rnb-rc-tabs receives a total of 3 downloads a week. As such, we scored rnb-rc-tabs popularity level to be Limited.

Based on project statistics from the GitHub repository for the npm package rnb-rc-tabs, we found that it has been starred 565 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Sustainable

Readme.md: Yes
Contributing.md: No
Code of Conduct: No
Contributors: 80
Funding: Yes

With more than 10 contributors for the rnb-rc-tabs repository, this is possibly a sign for a growing and inviting community.

We found a way for you to contribute to the project! Looks like rnb-rc-tabs is missing a Code of Conduct.

Embed Package Health Score Badge

Maintenance

Inactive

Commit Frequency

Open Issues: 84
Open PR: 29
Last Release: 5 years ago
Last Commit: 9 days ago

Further analysis of the maintenance status of rnb-rc-tabs based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Inactive.

An important project maintenance signal to consider for rnb-rc-tabs is that it hasn't seen any new versions released to npm in the past 12 months, and could be considered as a discontinued project, or that which receives low attention from its maintainers.

As a healthy sign for on-going project maintenance, we found that the GitHub repository had at least 1 pull request or issue interacted with by the community.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: not defined

Age: 5 years
Dependencies: 10 Direct
Versions: 5
Install Size: 706 kB
Dist-tags: 1
# of Files: 52
Maintainers: 1
TS Typings: No

rnb-rc-tabs has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Readme

rc-tabs

React Tabs

Screenshot

Example

https://localhost:8000/examples

online example: https://react-component.github.io/tabs/

install

Feature

Keyboard

left and up: switch to previous tab
right and down: switch to next tab

Usage

import Tabs, { TabPane } from 'rc-tabs';
import TabContent from 'rc-tabs/lib/TabContent';
import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar';

var callback = function(key){

}

React.render(
  (
    }
      renderTabContent={()=&gt;}
    &gt;
      first
      second
      third
    
  ),
  document.getElementById('t2'));

Usage of navWrapper() function

navWrapper() prop allows to wrap tabs bar in a component to provide additional features.
Eg with react-sortablejs to make tabs sortable by DnD :

import Sortable from 'react-sortablejs';

navWrapper={(content) =&gt; {content}}

API

Tabs

props:

name	type	default	description
activeKey	String		current active tabPanel's key
tabBarPosition	String		tab nav 's position. one of ['left','right','top','bottom']
defaultActiveKey	String	first active tabPanel's key	initial active tabPanel's key if activeKey is absent
renderTabBar	():React.Node		How to render tab bar
renderTabContent	():React.Node		How to render tab content
navWrapper	(tabContent: React.Node):React.Node		Wrapper function that will wrap around tab panes, whould be useful for features such as drag and drop
onChange	(key: string): void		called when tabPanel is changed
destroyInactiveTabPane	Boolean	false	whether destroy inactive tabpane when change tab
prefixCls	String	rc-tabs	prefix class name, use to custom style

TabPane

props:

name	type	default	description
key	Object		corresponding to activeKey, should be unique
style	Object
placeholder	React.Node		lazyrender children
tab	React.Node		current tab's title corresponding to current tabPane
forceRender	Boolean	false	forced render of content in tabs, not lazy render after clicking on tabs

lib/TabBar

name	type	description
onTabClick	(key: string, event: MouseEvent): void	callback when tab clicked
style		bar style
extraContent	React Node	extra content placed one the right of tab bar
tabBarGutter	number	the gap between tabs

lib/InkTabBar

tab bar with ink indicator, in addition to tab bar props, extra props:

name	type	default	description
styles	{ inkBar }		can set inkBar style

lib/ScrollableTabBar

scrollable tab bar, in addition to tab bar props, extra props:

name	type	description
onPrevClick	(e: Event): void	callback when prev button is clicked
onNextClick	(e: Event): void	callback when next button is clicked
prevIcon	ReactNode	specific the prev icon
nextIcon	ReactNode	specific the next icon

lib/ScrollableInkTabBar

scrollable tab bar with ink indicator, same with tab bar and ink bar and scrollable bar props.

name	type	default	description
children	(node) => node	-	Customize tab bar node

lib/SwipeableInkTabBar (Use for Mobile)

swipeable tab bar with ink indicator, same with tab bar/ink bar props, and below is the additional props.

name	type	default	description
pageSize	number	5	show how many tabs at one page
speed	number	5	swipe speed, 1 to 10, more bigger more faster
hammerOptions	Object		options for react-hammerjs

lib/TabContent

name	type	default	description
style	Object		tab content style
animated	Boolean	true	whether tabpane change with animation
animatedWithMargin	Boolean	false	whether animate tabpane with css margin

lib/SwipeableTabContent

swipeable tab panes, in addition to lib/TabContent props, extra props:

name	type	default	description
hammerOptions	Object		options for react-hammerjs

Note

If you want to support old browsers(which does not support flex/css-transition), please load the following script inside head to add no-flexbox/no-csstransition css classes

https://as.alipayobjects.com/g/component/modernizr/2.8.3/modernizr.min.js

Development

npm install
npm start

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rc-tabs is released under the MIT license.

rnb-rc-tabs dependencies

babel-runtime classnames create-react-context lodash prop-types raf rc-hammerjs rc-util resize-observer-polyfill warning

rnb-rc-tabs development dependencies

FAQs

What is rnb-rc-tabs?

tabs ui component for react. Visit Snyk Advisor to see a full health score report for rnb-rc-tabs, including popularity, security, maintenance & community analysis.

Is rnb-rc-tabs popular?

The npm package rnb-rc-tabs receives a total of 3 weekly downloads. As such, rnb-rc-tabs popularity was classified as limited. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is rnb-rc-tabs well maintained?

We found indications that rnb-rc-tabs is an Inactive project. See the full package health analysis to learn more about the package maintenance status.

Is rnb-rc-tabs safe to use?

While scanning the latest version of rnb-rc-tabs, we found that a security review is needed. A total of 0 vulnerabilities or license issues were detected. See the full security scan results.

Last updated on 5 November-2024, at 13:20 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP

Package Health Score

Explore Similar Packages

Security and license risk for significant versions

Is your project affected by vulnerabilities?

Weekly Downloads (3)

Direct Usage Popularity

Embed Package Health Score Badge

Commit Frequency

Keep your project healthy

Check your package.json

Snyk Vulnerability Scanner

Readme

rc-tabs

Screenshot

Example

install

Feature

Keyboard

Usage

Usage of navWrapper() function

API

Tabs

props:

TabPane

props:

lib/TabBar

lib/InkTabBar

lib/ScrollableTabBar

lib/ScrollableInkTabBar

lib/SwipeableInkTabBar (Use for Mobile)

lib/TabContent

lib/SwipeableTabContent

Note

Development

Test Case

Coverage

License

rnb-rc-tabs dependencies

rnb-rc-tabs development dependencies

FAQs

What is rnb-rc-tabs?

Is rnb-rc-tabs popular?

Is rnb-rc-tabs well maintained?

Is rnb-rc-tabs safe to use?

Build a secure application checklist

Select a recommended open source package

Scan your app for vulnerabilities

Source Code

Open Source

Container

Config

Fix identified vulnerabilities

Monitor for new issues