Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix umd #212

Merged
merged 3 commits into from
Oct 5, 2017
Merged

Fix umd #212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6d43013
fix(umd): Fix the umd builds
danez Oct 5, 2017
abaac38
Add exmaples for umd
danez Oct 5, 2017
93e0804
Correct version of external-helpers
danez Oct 5, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 0 additions & 11 deletions .babelrc
View file
Open in desktop

This file was deleted.

17 changes: 17 additions & 0 deletions .babelrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
'use strict';

const target = process.env.BABEL_TARGET;
const modules = target === 'rollup' ? false : 'commonjs';

const options = {
presets: [['env', { loose: true, modules }], 'react'],
plugins: ['transform-object-rest-spread', ['transform-class-properties', { loose: true }]],
};

if (target === 'rollup') {
options.plugins.push('external-helpers');
} else {
options.plugins.push(['transform-react-remove-prop-types', { mode: 'wrap' }]);
}

module.exports = options;
2 changes: 2 additions & 0 deletions .eslintignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
/webpack.*
examples
lib
dist
11 changes: 6 additions & 5 deletions .eslintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,14 @@
"browser": true,
"node": true
},
"plugins": [
"prettier"
],
"plugins": ["prettier"],
"rules": {
"arrow-parens": "off",
"no-plusplus": "off",
"prettier/prettier": ["error", { "singleQuote": true, "printWidth": 100, "trailingComma": "all"}],
"prettier/prettier": [
"error",
{ "singleQuote": true, "printWidth": 100, "trailingComma": "all" }
],
"react/require-default-props": "off",
"react/jsx-filename-extension": ["error", { "extensions": [".js"] }],
"react/forbid-prop-types": "off",
Expand All @@ -20,7 +21,7 @@
"import/no-extraneous-dependencies": [
"error",
{
"devDependencies": ["**/__tests__/**/*"],
"devDependencies": ["**/__tests__/**/*", "rollup.config.js"],
"optionalDependencies": false
}
]
Expand Down
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@ build/
node_modules/
npm-debug.log
lib/
dist/
32 changes: 22 additions & 10 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,24 @@

Accessible react tab component

> Supports React 0.14.9+ and 15.3+
> Supports React 0.14.9+, 15.3+ and 16+

## Installing

```bash
yarn add react-tabs
```

You can also still use npm

```bash
npm install react-tabs --save
```

Or use directly in your html as UMD component
You can also use react-tabs directly as UMD build in an HTML document by adding

```html
<script src="https://unpkg.com/react-tabs@1.0.0/dist/react-tabs.min.js" />
<script src="https://unpkg.com/react-tabs@2/dist/react-tabs.development.js" />
<!-- or -->
<script src="https://unpkg.com/react-tabs@2/dist/react-tabs.production.min.js" />
```

For example usages of the UMD builds have a look at the [`examples/umd`](./examples/umd/) folder

## Demo

https://reactcommunity.org/react-tabs/example/
Expand Down Expand Up @@ -54,7 +52,7 @@ export default () => (

### resetIdCounter(): void

Allows reseting the internal id counter which is used to generate unique id's for tabs and tab panels.
Allows reseting the internal id counter which is used to generate unique id's for tabs and tab panels.

You should never need to use this in the browser. Only if you are running an isomorphic react app that is rendered on the server you should call `resetIdCounter()` before every render so that the ids that get generated on the server match the ids generated in the browser.

Expand Down Expand Up @@ -302,6 +300,20 @@ When using LESS you can easily import the default styles
@import '../../path/to/node_modules/react-tabs/style/react-tabs.less';
```

### UMD

When using the UMD version of react-tabs you can easily use the default styles by adding

```html
<html>
<head>
...
<link rel="stylesheet" href="https://unpkg.com/react-tabs@2/style/react-tabs.css">
</head>
...
</html>
```

### Custom

You can also always just simply copy the default style to your own css/scss/less and modify it to your own needs. The changelog will always tell you when classes change and we also consider changes that break the styling as semver major.
Expand Down
Loading