npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

rmc-tabs

v1.2.29

Published

React Mobile Tabs Component(web & react-native)

Downloads

76,250

Readme

rmc-tabs


React Mobile Tabs Component (web & react-native), inspired by react-native-scrollable-tab-view

NPM version react build status Test coverage gemnasium deps npm download

Screenshots

Development

npm i
npm start

Example

http://localhost:8000/examples/

online example: http://react-component.github.io/m-tabs/

install

rmc-tabs

docs

Usage

// normal
<Tabs tabs={[
    { key: 't1', title: 't1' },
    { key: 't2', title: 't2' },
    { key: 't3', title: 't3' },
    { key: 't4', title: 't4' },
    { key: 't5', title: 't5' },
]} initalPage={'t2'}
>
  <div key="t1"><p>content1</p></div>
  <div key="t2"><p>content2</p></div>
  <div key="t3"><p>content3</p></div>
  <div key="t4"><p>content4</p></div>
  <div key="t5"><p>content5</p></div>
</Tabs>

// single content
<Tabs tabs={[
    { title: 't1' },
    { title: 't2' },
    { title: 't3' },
    { title: 't4' },
    { title: 't5' },
]} onChange={(tab, index) => {
    this.setState({
        scData: JSON.stringify({ index: index + Math.random(), tab })
    });
}}
>
    <div>
        <p>single content</p>
        <p>{this.state.scData}</p>
    </div>
</Tabs>

// single content function
<Tabs tabs={[
    { title: 't1' },
    { title: 't2' },
    { title: 't3' },
    { title: 't4' },
    { title: 't5' },
]}
>
    {
        (index, tab) =>
            <div>
                <p>single content</p>
                <p>{JSON.stringify({ index: index + Math.random(), tab })}</p>
            </div>
    }
</Tabs>

// renderTabBar e.g: Sticky, react-sticky
./examples/sticky.tsx

react-native

npm run rn-init
npm run watch-tsc
react-native start
react-native run-ios

API

Tabs:

属性 | 说明 | 类型 | 默认值 | 必选 ----|-----|------|------|------ tabs | tabs data | Models.TabData[] | | true tabBarPosition | TabBar's position | 'top' | 'bottom' | 'left' | 'right' | top | false renderTabBar | render for TabBar | ((props: TabBarPropsType) => React.ReactNode) | false | | false initialPage | initial Tab, index or key | number | string | | false page | current tab, index or key | number | string | | false swipeable | whether to switch tabs with swipe gestrue in the content | boolean | true | false useOnPan (web only) | use scroll follow pan | boolean | true | false prerenderingSiblingsNumber | pre-render nearby # sibling, Infinity: render all the siblings, 0: render current page | number | 1 | false animated | whether to change tabs with animation | boolean | true | false onChange | callback when tab is switched | (tab: Models.TabData, index: number) => void | | false onTabClick | on tab click | (tab: Models.TabData, index: number) => void | | false destroyInactiveTab | destroy inactive tab | boolean | false | false distanceToChangeTab | distance to change tab, width ratio | number | 0.3 | false usePaged | use paged | boolean | true | false tabDirection | tab paging direction | 'horizontal' | 'vertical' | horizontal | false tabBarUnderlineStyle | tabBar underline style | React.CSSProperties | any | | false tabBarBackgroundColor | tabBar background color | string | | false tabBarActiveTextColor | tabBar active text color | string | | false tabBarInactiveTextColor | tabBar inactive text color | string | | false tabBarTextStyle | tabBar text style | React.CSSProperties | any | | false

TabBarPropsType (Common):

属性 | 说明 | 类型 | 默认值 | 必选 ----|-----|------|------|------ goToTab | call this function to switch tab | (index: number) => void | | true tabs | tabs data | Models.TabData[] | | true activeTab | current active tab | number | | true animated | use animate | boolean | true | true renderTab | render the tab of tabbar | (tab: Models.TabData) => React.ReactNode | | false page | page size of tabbar's tab | number | 5 | false onTabClick | on tab click | (tab: Models.TabData, index: number) => void | | false tabBarPosition | tabBar's position defualt: top | 'top' | 'bottom' | 'left' | 'right' | | false tabBarUnderlineStyle | tabBar underline style | React.CSSProperties | any | | false tabBarBackgroundColor | tabBar background color | string | | false tabBarActiveTextColor | tabBar active text color | string | | false tabBarInactiveTextColor | tabBar inactive text color | string | | false tabBarTextStyle | tabBar text style | React.CSSProperties | any | | false

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rmc-tabs is released under the MIT license.