no way to use Tab & TabLink with NavLink from 'react-router'

<Tab isActive>
  <TabLink>Name</TabLink>
</Tab>

will generate:

<li class="is-active">
  <a>Name</a>
</li>

But, NavLink from react-router can only add className to itself, if it’s active.

<NavLink to="/path" activeClassName="is-active" >Title</NavLink>

if we’re in /path url, it will generate:

<a href="/path" class="is-active">Title</a>

So, even if we compose NavLink & TabLink, there’s still no way to use bulma’s style with it. Because, we can’t add className to Tab when NavLink is active.

[AlgusDark]

@MunifTanjim , you’re right, there is no easy way to use NavLink, but remember that you have Link and you can use it like this example. This example is based on React Router custom link example.

Since Bulma use this kind of classes for tabs, we’re unable to change the behavior. I’ve been really busy but I want to change this kind of stuff (since Bulma is not intended for React while Bloomer is ) and make Bloomer React friendly with other famous libraries, styled-components is going to help us to achieve this.

import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import { Tabs, Tab, TabList, TabLink, Icon } from "bloomer";

const Pictures = () => (
  <div>
    <h2>Pictures</h2>
  </div>
);

const Music = () => (
  <div>
    <h2>Music</h2>
  </div>
);

const Video = () => (
  <div>
    <h2>Video</h2>
  </div>
);

const Documents = () => (
  <div>
    <h2>Documents</h2>
  </div>
);

const CustomTab = ({ label, to, activeOnlyWhenExact, icon }) => (
  <Route
    path={to}
    exact={activeOnlyWhenExact}
    children={({ match }) => (
      <Tab isActive={match}>
        <Link to={to}>
          <Icon isSize="small">
            <span className={`fa fa-${icon || "image"}`} aria-hidden="true" />
          </Icon>
          <span>{label}</span>
        </Link>
      </Tab>
    )}
  />
);

class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <Tabs>
            <TabList>
              <CustomTab activeOnlyWhenExact={true} to="/" label="Pictures" />
              <CustomTab to="/music" label="Music" icon="music" />
              <CustomTab to="/video" label="Video" icon="film" />
              <CustomTab to="/documents" label="Documents" icon="file-text-o" />
            </TabList>
          </Tabs>

          <Route exact path="/" component={Pictures} />
          <Route path="/music" component={Music} />
          <Route path="/video" component={Video} />
          <Route path="/documents" component={Documents} />
        </div>
      </Router>
    );
  }
}

render(<App />, document.getElementById("root"));

[pauleveritt]

Here you go: https://gist.github.com/pauleveritt/c5bc6d6f317daede74b97216294bb87f

I suspect the gist will be insufficient as well, as this is an interaction with react-router 4. Meaning, if I need to make a small repo, let me know.