bemto-overflower
Advanced tools
bemto-overflower - npm Package Compare versions
Comparing version 0.1.0 to 0.2.0
| ## Changelog | ||
| ### v0.2.0 (2018-03-05) | ||
| - Updated deps (bemto-components & styled-components). | ||
| - kizu/bemto-components → bemto/bemto-components. | ||
| ### v0.1.0 (2018-01-29) | ||
| - Initial basic version |
| const bemto = require('bemto-components'); | ||
| const styled = require('styled-components').default; | ||
| const css = require('styled-components').css; | ||
| const PropTypes = require('prop-types'); | ||
@@ -6,0 +4,0 @@ const nodeToString = (node) => typeof node === 'string' ? node : false; |
| This is an implementation of a flexible overflow element (see [article about it](http://kizu.ru/en/blog/flexible-overflow/)), which allows us to have a responsive text snippet that would adjust its content based on available space. | ||
| [![Build Status][build]][build-link] [![NPM package version][version]][version-link] | ||
| [build]: https://travis-ci.org/bemto/bemto-overflower.svg?branch=master | ||
| [build-link]: https://travis-ci.org/bemto/bemto-overflower | ||
| [version]: https://img.shields.io/npm/v/bemto-overflower.svg | ||
| [version-link]: https://www.npmjs.com/package/bemto-overflower | ||
| This component has all the powers of bemto-components beneath, so you can use modifiers, polymorphic tags and all the other stuff. See the docs of [bemto-components](http://kizu.ru/bemto-components/#elements) for more features and [this component's source code](https://github.com/bemto/bemto-overflower) to see how easily it is done. | ||
@@ -21,15 +28,15 @@ | ||
| By default all it would do is just make your content non-wrappable, have max-width to 100% and ellispis on text overflow (resize this block or browser window to see it in action): | ||
| For using the main feature of bemto-overflower, you must pass a string or a node as a `__Overflow` prop and it would create an element that would adapt to its container's width: whenever there won't be enough space for its original content, the content from the `__Overflow` part would be displayed: | ||
| <BemtoOverflower> | ||
| <BemtoOverflower __Overflow='Short text here is.'> | ||
| Some long text that could become shorter. | ||
| </BemtoOverflower> | ||
| However, the main feature is much more powerful: you can pass a string or a node as a `__Overflow` prop and it would create an element that would adapt to its container's width: whenever there won't be enough space for its original content, the content from the `__Overflow` part would be displayed: | ||
| Its possible to not pass `__Overflower` element, this way our content would just have `text-overflow: ellipsis` on overflow: | ||
| <BemtoOverflower __Overflow='Short text here is.'> | ||
| Some long text that could become shorter. | ||
| <BemtoOverflower> | ||
| Some long text that could become trimmed with ellipsis. | ||
| </BemtoOverflower> | ||
| In future we could add a way to pass an array of possible replacements to enable multi-level overflower, but for now you can just pass another one to its `__Overflow` to make it three-leveled: | ||
| In future we could add a way to pass an array of possible replacements to enable multi-level overflower (or another way of doing it), but for now you can just pass another one to its `__Overflow` to make it three-leveled: | ||
@@ -36,0 +43,0 @@ <BemtoOverflower |
| { | ||
| "name": "bemto-overflower", | ||
| "version": "0.1.0", | ||
| "version": "0.2.0", | ||
| "description": "Flexible content overflow based on bemto-components & styled-components", | ||
@@ -27,4 +27,4 @@ "main": "lib/index.js", | ||
| "dependencies": { | ||
| "bemto-components": "^1.6.2", | ||
| "styled-components": "^2.2.3" | ||
| "bemto-components": "^2.0.0", | ||
| "styled-components": "^3.1.6" | ||
| }, | ||
@@ -34,7 +34,6 @@ "devDependencies": { | ||
| "babel-preset-env": "^1.6.1", | ||
| "jest": "^21.2.1", | ||
| "jest-styled-components": "^4.9.0", | ||
| "react-test-renderer": "16.1.1", | ||
| "styled-components": "^2.2.3" | ||
| "jest": "^22.4.2", | ||
| "jest-styled-components": "^5.0.0", | ||
| "react-test-renderer": "16.1.1" | ||
| } | ||
| } |
@@ -8,3 +8,3 @@ # bemto-overflower [![Build Status][build]][build-link] [![NPM package version][version]][version-link] | ||
| This is a flexible content overflow component, using [bemto-components](https://github.com/kizu/bemto-components) and [styled-components](https://www.styled-components.com/). | ||
| This is a flexible content overflow component, using [bemto-components](https://github.com/bemto/bemto-components) and [styled-components](https://www.styled-components.com/). | ||
@@ -11,0 +11,0 @@ The documentation for the bemto-overflower is available as a [section of bemto-components' docs](http://kizu.ru/bemto-components/#bemtooverflower). You could see there all the features of bemto-overflower and play with them right in your browser in an interactive playgrounds. |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.17%
16083
- Dev dependency count
- decreased by-16.67%
5
Worsened metrics
- Lines of code
- decreased by-2.11%
93
Dependency changes
+ Addedbemto-components@2.5.1(transitive)
+ Addedhoist-non-react-statics@2.5.5(transitive)
+ Addedlodash.clonedeep@4.5.0(transitive)
+ Addedreact@16.14.0(transitive)
+ Addedstyled-components@3.4.10(transitive)
+ Addedstylis-rule-sheet@0.0.10(transitive)
- Removedbemto-components@1.7.0(transitive)
- Removedhoist-non-react-statics@1.2.0(transitive)
- Removedis-plain-object@2.0.4(transitive)
- Removedisobject@3.0.1(transitive)
- Removedreact@16.1.1(transitive)
- Removedstyled-components@2.4.1(transitive)
Updatedbemto-components@^2.0.0
Updatedstyled-components@^3.1.6