Comments (8)
The best would be possible turn off style entirely.
from react-tabs.
Just a suggestion: Let us pass our own style?
from react-tabs.
Just a suggestion: Let us pass our own style?
I don't like this option because it still forces the project to depend on js-stylesheet
.
The best would be possible turn off style entirely.
This is currently possible @HonzaMikula, as a global here.
Yes. It would be better if js-stylesheet
were not a dependency, and the styles could optionally be imported like so:
// These no longer require the styles or `js-stylesheet`...
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
// ...So we must import ourselves...
import jss from 'js-stylesheet';
// If we didn't import this here, it would not be bundled into the project at all.
import TabStyles from 'react-tabs/styles';
class MyTabs {
componentDidMount() {
// Bit of extra work - but that's the point.
jss(TabStyles);
}
render() {
return (
<Tabs>
// blah blah
</Tabs>
);
}
}
Right now this project adds js-styles
as a dependency, even though my project doesn't use your styles option!
An alternate implementation would move js-stylesheet
to optionalDependencies
, and instead of import
ing it at the top of Tabs.js
, it could be moved into here like so:
componentDidMount() {
if (useDefaultStyles) {
// Will fail if *optional* dependency is not included - this responsibility is on the client.
require('js-stylesheet')(require('../helpers/styles.js')); // eslint-disable-line global-require
}
},
But this approach is less optimal because the /helpers/styles.js
file will still be bundled by webpack (which detects and replaces require
statements).
Also if you wanted to do this in a back compatible way, the main package could export Tabs
as a higher order component and have react-tabs/unstyled
as the functional part of the component. The default exported Tabs
component would be something like this:
import jss from 'js-styles';
import styles from './helper/styles';
import UnstyledTabs from './unstyled/tabs';
export default class Tabs {
componentDidMount() {
jss(styles);
}
render() {
return <UnstyledTabs {...this.props} />;
}
}
Actually that last one is probably the best. Want a PR, @danez? If so, which one?
from react-tabs.
It'd be awesome if we could pass a prop useDefaultTyles={false}
to disable default styles instead of calling Tabs.setUseDefaultStyles(false)
globally. It feels more intuitive.
I think that for this to be possible the default styles would need to be included as inline styles (style={props.useDefaultStyles && defaultStyles
}), otherwise one Tabs element set to use default styles would pollute the entire CSS and impact all other Tabs elements in the web app.
I think you could also drop the dependency on jss
this way, or at least pave the way.
from react-tabs.
@danez how did you resolve this in the end? I'm searching for useDefaultStyles
on the diff of #161 and can only find it in the old part of the diff, not the new. Also I see you deleted helpers/styles.js
entirely.
from react-tabs.
The idea is to not force anyone to use a specific css technology. So instead of having style injected by default with js-stylesheets
, react-tabs does not do anything by default regarding css (besides adding classnames to the rendered elements). It is up to the user to wire things up. There is a new file style/react-tabs.css
which can be for example imported when using webpack css-loader
import 'react-tabs/style/react-tabs.css';
Or it can be simply copied.
I can maybe also add a sass/less variant that can be imported in someones own sass/less files.
It is a little bit more work to initially get the default style going, but a lot of people wanted to disable the default style (with js-stylesheet
) anyway.
Does that sound reasonable? What do you think?
from react-tabs.
Sounds like the right solution to me 👍
from react-tabs.
Yep, sounds perfect to me!
from react-tabs.
Related Issues (20)
- Property 'tabsRole' is missing in type 'ReactElement<any, any>' but required in type 'ReactTabsFunctionComponent<TabProps> HOT 1
- No content after refresh HOT 5
- about prop types
- UncontrolledTabs.js Eror: Uncaught TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.useId) is not a function HOT 5
- keyboard accessibility of https://reactcommunity.org/react-tabs/ HOT 5
- React-tabs closes React-select (onclick)
- Issues when implementing the same Tabs for different TabPanels HOT 2
- export 'useId' (imported as 'useId') was not found in 'react' HOT 2
- Possible to disable using TabPanel when in controlled mode? HOT 1
- How I can fix this error in react version dependency? HOT 2
- Components Rendering Issue HOT 3
- typo
- React-tabs dropped clicks on tab switch when inspecting on mobile device HOT 1
- defaultProps warning - Support for defaultProps will be removed from function component will be removed HOT 5
- Could not find a declaration file for module 'react-tabs' on v4.2.1 HOT 2
- Disabled tabs should remain keyboard focusable as per W3C WAI ARIA guidelines HOT 3
- Support hiding of all TabPanels HOT 1
- How can I stop re-rendering in React when switching between tabs? HOT 7
- How to set the tab container's width to be the width of the widest tab? HOT 1
- Errors when using react-tabs in an Astro page
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-tabs.