diff --git a/README.md b/README.md index f77b9a4..f6e4bbf 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Responsive and accessible clamping component with _«Read more»_/_«Read less»_ buttons built for [React](http://facebook.github.io/react/). -![react-clamp-lines](react-clamp.png 'react-clamp-lines') +![react-clamp-lines](react-clamp.png "react-clamp-lines") ## Demo @@ -28,9 +28,9 @@ Responsive and accessible clamping component with _«Read more»_/_&la ## Usage ```js -import React, { Component } from 'react'; -import ReactDOM from 'react-dom'; -import ClampLines from 'react-clamp-lines'; +import React, { Component } from "react"; +import ReactDOM from "react-dom"; +import ClampLines from "react-clamp-lines"; class App extends Component { render() { @@ -40,6 +40,7 @@ class App extends Component { id="really-unique-id" lines={4} ellipsis="..." + cutoff={12a} moreText="Expand" lessText="Collapse" className="custom-class" @@ -49,20 +50,17 @@ class App extends Component { } } -ReactDOM.render(, document.getElementById('clamp')); +ReactDOM.render(, document.getElementById("clamp")); ``` The component and the or _«Read more»_ button always have the `clamp-lines` and `clamp-lines__button` CSS classes respectively. In the example above the `custom-class` will be added to `clamp-lines`, so the output will be: ```html
- -