chacestew / react-router-tabs Goto Github PK

How do I build and run the example project with yarn?

Hello,

I'm at "http://localhost:3000/service/2674d464c64ca745b9e34058" and clicking a tab redirects the browser to "http://localhost:3000/service/:id/admins". Is there are way or trick to ensure the params are correctly passed?

Would it be possible to handle conditional tabs? Currently If I add a condition to display or not a tab it throws an error

<RoutedTabs startPathWith={match.url} className="page__tabs">
    <NavTab to={isNew ? '' : '/details'}>Details</NavTab>
    {!isNew && <NavTab to="/merge">Merge</NavTab>}
</RoutedTabs>

Here is a potential fix

const enhancedChildren = React.Children.map(children, tab => {
    if (!tab) return;
...

Thanks, great plugin!

The propType validation require to to be a string, but it could be an object as well.

For example, I might use NavTab to relay the search part of the URL, like so:

<NavTab to={{pathname:'some/path', search:this.props.location.search}}>Beam me up!</NavTab>
instead of
<NavTab to={'some/path'}>Beam me up!</NavTab>

So, I think the validation needs to be updated accordingly. Should I submit a PR for the same?

Hi, I tried the example from the github readme, bur I get this error message:

TypeError: Cannot read property 'to' of undefined
(anonymous function)
node_modules/react-router-tabs/lib/RoutedTabs.js:40
  37 | var props = tab.props;
  38 | 
  39 | 
> 40 | var to = _typeof(props.to) === 'object' ? _extends({}, props.to, { pathname: startPathWith + props.to.pathname }) : startPathWith + props.to;
  41 | 
  42 | return _react2.default.cloneElement(tab, _extends({
  43 |   to: to,

I'm curious if there is any way to use the Tabs as part of an unordered list.

<RoutedTabs startPathWith={match.url}>
  <ul>
    {items.map(({ name, slug }) => (
      <li>
        <NavTab
           key={slug}
            to={`/${slug}`}
         >
           {name}
         </NavTab>
       </li>
      ))}
   </ul>
</RoutedTabs>

Currently, the RoutedTabs component passes all the props to its children so in the case of a list it passes these props to the li element instead of the NavTab (child of li) resulting in its functionality being lost.

Thanks

Module bundling was a bit rushed at the outset and should be updated. My thoughts so far:

1. Move to rollup
2. Consider adding a UMD build
3. Check what babel options we need (might be a good idea to try match react-router here)
4. Update dependencies
   ...
5. Check if any of the above are breaking and semver accordingly

The first 4 aren't necessarily ordered, but it makes sense to try do them at the same time.

Input and pull requests are very welcome.

Hi @chacestew , first of all, thanks for writing this useful library. The RoutedTabs components seem to fail after upgrading to react-router 4.4.0

Hello

My tabs contains some inner navigation. I need to be able to go back to the default/home tab when I reselect a currently selected tab. Is that already possible?

In short: If I am at /tab1/subroute clicking on Tab 1 would send me to /tab1

Is there any way to add close icon or some other way to close Tab?

Hi -

Just discovered this component and it works like a charm. I'm hoping that there is a way to accomplish this:

I have a Parent component with a set of Tabs that each display a Child component that has it's own set of Tabs. When one of the nested Tabs is clicked the parent Tab loses its active state. I would like to still highlight the parent Tab while navigating through the children Tabs.

Hopefully that makes sense!

Thanks

A feature I love in react bootstrap's tab implementation is the ability to have a component not unmount when a tab is navigated away from (simply hide it). This makes it much easier to restore complex state as we may have some complicated form, google maps, etc in our tabs. It may be out of scope for a project like this, but it would be amazing!

Hello,
my use-case involves adding a new tab whenever the user visits a new url. The user can also remove each tab individually.
The problem I am facing right now is that I want each tab component to remain mounted, assuming there is a form in Tab1, when the user visits Tab2 and goes back to Tab1, he'd expect the form to still be filled with whatever he entered.

So my question is: Is there some way to do this? To keep active tab components mounted and unmount them only when the user manually closes said tab?

Any help at this point would be most helpful.
Thank you.

Not an issue, just suggestion.

It would be nice to have component prop for NavTab. It could act like a wrap for Switch/Route and will allow to reduce boilerplate.
Example:

<NavTab to="/admins" component={Admins}>Admins</NavTab>
<NavTab to="/moderators" component={Moderators}>Moderators</NavTab>
<NavTab to="/users" component={Users}>Users</NavTab>

would compile to

<Switch>
  <Route... />
  <Route... />
  ...
</Switch>

block after the last NavTab element.

Is there anyway I can put a NavTab inside of a Material UI Tab or vice versa so that it has the visual appearance and effects of a Material UI Tab but still the navigation functionality of NavTab?

activeTabStyle proptype's type is string but it should beobject

index.js:2178 Warning: Failed prop type: Invalid prop `activeTabStyle` of type `object` supplied to `RoutedTabs`, expected `string`.
    in RoutedTabs....