Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-swipeable-tabs
Advanced tools
Readme
$ npm install react-swipeable-tabs --save
import React from 'react';
import SwipeableTabs from 'react-swipeable-tabs';
export default class TestTabs extends React.Component {
componentWillMount() {
this.setState({
activeItemIndex: 2,
items: [
{ title: "Item 1" },
{ title: "Item 2" },
{ title: "Item 3" },
{ title: "Item 4" },
{ title: "Item 5" },
{ title: "Item 6" },
{ title: "Item 7" },
{ title: "Item 8" },
{ title: "Item 9" },
{ title: "Item 10" },
{ title: "Item 11" },
{ title: "Item 12" },
]
});
}
render() {
return (
<SwipeableTabs
noFirstLeftPadding={false}
noLastRightPadding={false}
fitItems={false}
alignCenter={false}
borderWidthRatio={1}
activeItemIndex={this.state.activeItemIndex}
onItemClick={(item, index) => this.setState({ activeItemIndex: index })}
items={this.state.items}
borderPosition="top"
borderThickness={2}
borderColor="#4dc4c0"
activeStyle={{
color: '#4dc4c0'
}}
/>
);
}
}
Property | Type | Default | Description |
---|---|---|---|
items* | arrayOf (element) | Array of tabs to render. | |
onItemClick* | func | When an item is clicked, this is called with (item, index) . | |
activeItemIndex | number | 0 | This is only useful if you want to control the active item index from outside. |
itemClassName | string | Item class name. | |
itemStyle | object | {} | Item style. |
activeStyle | object | {} | Active item style. |
alignCenter | bool | true | Whether or not to align center if items total width smaller than container width. |
fitItems | bool | false | This option will fit all items on desktop |
noFirstLeftPadding | bool | false | This prop defines if the first item doesnt have left padding. |
We use this to calculate the border position for the first element. | |||
noLastRightPadding | bool | false | This prop defines if the last item doesnt have right padding. |
We use this to calculate the border position for the last element. | |||
borderPosition | enum ('top', 'bottom') | 'bottom' | Border position. |
borderColor | string | '#333' | Border color. |
borderThickness | number | 2 | Border thickness in pixels. |
borderWidthRatio | number | 1 | Border width ratio from the tab width. |
Setting this to 1 will set border width to exactly the tab width. | |||
safeMargin | number | 100 | This value is used when user tries to drag the tabs far to right or left. |
Setting this to 100 for example user will be able to drag the tabs 100px | |||
far to right and left. | |||
initialTranslation | number | 0 | Initial translation. Ignore this. |
stiffness | number | 170 | React motion configurations. |
More about this here | |||
damping | number | 26 | React motion configurations. |
More about this here | |||
resistanceCoeffiecent | number | 0.5 | Drag resistance coeffiecent. |
Higher resitance tougher the user can drag the tabs. | |||
gravityAccelarion | number | 9.8 | Gravity acceleration. |
Higher resitance tougher the user can drag the tabs. | |||
dragCoefficient | number | 0.04 | Learn more |
To contribute, follow these steps:
npm install
npm start
localhost:3000
MIT
FAQs
React Swipeable tabs
The npm package react-swipeable-tabs receives a total of 123 weekly downloads. As such, react-swipeable-tabs popularity was classified as not popular.
We found that react-swipeable-tabs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.