Package Health Score

72 / 100

security
No known security issues
popularity
Limited
maintenance
Sustainable
community
Sustainable

Explore Similar Packages

Security

No known security issues

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

Security and license risk for significant versions

Version				Vulnerabilities	License Risk
15.1.1	\|	07/2024	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 rc-tabs-modern receives a total of 3 downloads a week. As such, we scored rc-tabs-modern popularity level to be Limited.

Based on project statistics from the GitHub repository for the npm package rc-tabs-modern, 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 rc-tabs-modern 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 rc-tabs-modern is missing a Code of Conduct.

Embed Package Health Score Badge

Maintenance

Sustainable

Commit Frequency

Open Issues: 84
Open PR: 29
Last Release: 4 months ago
Last Commit: 14 days ago

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

We found that rc-tabs-modern demonstrates a positive version release cadence with at least one new version released in the past 12 months.

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: >=8.x

Age: 4 months
Dependencies: 7 Direct
Versions: 2
Install Size: 141 kB
Dist-tags: 1
# of Files: 84
Maintainers: 1
TS Typings: No

rc-tabs-modern 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 component.

Screenshot

Example

https://localhost:8000/examples

online example: https://tabs.react-component.now.sh/

install

Feature

Keyboard

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

Usage

import Tabs from 'rc-tabs';
import ReactDom from 'react-dom';

const callback = (key) =&gt; {
  console.log(key);
};

const items = [
  {
    key: '1',
    label: 'Google',
    children: (
      <div>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
      </div>
    ),
  },
  {
    key: '2',
    label: <p>Amazon</p>,
    children:
      'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...',
    disabled: true,
  },
  {
    key: '3',
    label: <p>Twitter</p>,
    children: (
      <div>
        "There is no one who loves pain itself, who seeks after it and wants to have it, simply
        because it is pain..."
      </div>
    ),
  },
];

ReactDom.render(
  ,
  root,
);

API

Tabs

name	type	default	description
prefixCls	string	`'rc-tabs'`	prefix class name, use to custom style
className	string	-	to define a class name for an element
style	CSS properties	-	object with css properties for styling
items	TabItem[]	[]	configure tab content
id	string	-	unique identifier
defaultActiveKey	string	-	initial active tabPanel's key if activeKey is absent
activeKey	string	-	current active tabPanel's key
direction	`'ltr' or 'rtl'`	`'ltr'`	Layout direction of tabs component
animated	boolean \| { inkBar: boolean, tabPane: boolean }	`{ inkBar: true, tabPane: false }`	config animation
renderTabBar	(props, TabBarComponent) => ReactElement	-	How to render tab bar
tabBarExtraContent	ReactNode \| `{ left: ReactNode, right: ReactNode }`	-	config extra content
tabBarGutter	number	0	config tab bar gutter
tabBarPosition	`'left' \| 'right' \| 'top' \| 'bottom'`	`'top'`	tab nav 's position
tabBarStyle	style	-	tab nav style
tabPosition	`'left' or 'right' or 'top' or 'bottom'`	`'top'`	tab nav 's position
destroyInactiveTabPane	boolean	false	whether destroy inactive TabPane when change tab
onChange	(key) => void	-	called when tabPanel is changed
onTabClick	(key) => void	-	called when tab click
onTabScroll	({ direction }) => void	-	called when tab scroll
editable	{ onEdit(type: 'add' \| 'remove', info: { key, event }), showAdd: boolean, removeIcon: ReactNode, addIcon: ReactNode }	-	config tab editable
locale	{ dropdownAriaLabel: string, removeAriaLabel: string, addAriaLabel: string }	-	Accessibility locale help text
moreIcon	ReactNode	-	collapse icon

TabItem

name	type	default	description
key	string	-	corresponding to activeKey, should be unique
label	string	-	TabPane's head display text
tab	ReactNode	-	current tab's title corresponding to current tabPane
className	string	-	to define a class name for an element
style	CSS properties	-	object with css properties for styling
disabled	boolean	false	set TabPane disabled
children	ReactNode	-	TabPane's head display content
forceRender	boolean	false	forced render of content in tabs, not lazy render after clicking on tabs
closable	boolean	false	closable feature of tab item
closeIcon	ReactNode	-	Config close icon
prefixCls	string	`'rc-tabs-tab'`	prefix class name, use to custom style
id	string	-	unique identifier
animated	boolean \| { inkBar: boolean, tabPane: boolean }	`{ inkBar: true, tabPane: false }`	config animation
destroyInactiveTabPane	boolean	false	whether destroy inactive TabPane when change tab
active	boolean	false	active feature of tab item
tabKey	string	-	key linked to tab

TabPane(support in older versions)

name	type	default	description
destroyInactiveTabPane	boolean	false	whether destroy inactive TabPane when change tab
key	string	-	corresponding to activeKey, should be unique
forceRender	boolean	false	forced render of content in tabs, not lazy render after clicking on tabs
tab	ReactNode	-	current tab's title corresponding to current tabPane
closeIcon	ReactNode	-	Config close icon

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.

FAQ

Responsive Tabs

There are 3 cases when handling responsive tabs:

We get hidden tabs through useVisibleRange.ts. If enconter the third case, in order to make tabs responsive, some tabs should be hidden. So we minus addSize when calculating basicSize manully, even though there's no addNode in container. In this way, case 3 turns to case 2, tabs become stable again.

rc-tabs-modern dependencies

@babel/runtime classnames rc-dropdown rc-menu rc-motion rc-resize-observer rc-util

FAQs

What is rc-tabs-modern?

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

Is rc-tabs-modern popular?

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

Is rc-tabs-modern well maintained?

We found indications that rc-tabs-modern maintenance is sustainable demonstrating some project activity. We saw a total of 80 open source contributors collaborating on the project. See the full package health analysis to learn more about the package maintenance status.

Is rc-tabs-modern safe to use?

The npm package rc-tabs-modern was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 30 October-2024, at 16:00 (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

API

Tabs

TabItem

TabPane(support in older versions)

Development

Test Case

Coverage

License

FAQ

Responsive Tabs

rc-tabs-modern dependencies

rc-tabs-modern development dependencies

FAQs

What is rc-tabs-modern?

Is rc-tabs-modern popular?

Is rc-tabs-modern well maintained?

Is rc-tabs-modern 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