react-slide-nav

React slide nav.

installation

npm install -S @jswork/react-slide-nav

usage

1. import css

@import "~@jswork/react-slide-nav/dist/style.css";

// or use sass
@import "~@jswork/react-slide-nav/dist/style.scss";

2. import js

import ReactSlideNav from '@jswork/react-slide-nav';
import '@jswork/react-slide-nav/dist/style.scss';

function App() {
  return (
    <div className="m-10 p-4 shadow bg-gray-100 text-gray-800 hover:shadow-md transition-all">
      <div className="badge badge-warning absolute right-0 top-0 m-4">
        Build Time: {BUILD_TIME}
      </div>
      <h1>react-slide-nav</h1>
      <dl>
        <dt className="text-lg text-center">Events: [onClick]</dt>
        <dd>
          <ReactSlideNav
            className="x-5 h-10 fcc"
            activeClassName="text-red-600"
            items={['Home', 'About', 'Contact Us', 'FAQ']}
            onItemClick={(e) => console.log('on item click: ', e)}
          />
        </dd>
      </dl>
    </div>
  );
}

export default App;

preview

• https://afeiship.github.io/react-slide-nav/

license

Code released under the MIT license.