React collapsable component
Usage
- This component requires modular css and sass loader. Thus, to directly use this component, there is need to
inject
app created withreact-create-app
or manually configure the build. - For app created with
react-create-app
. Executeyarn eject
. Editconfig/webpack.config.dev.js
andconfig/webpack.config.prod.js
, changes
// "postcss" loader applies autoprefixer to our CSS.// "css" loader resolves paths in CSS and adds assets as dependencies.// "style" loader turns CSS into JS modules that inject <style> tags.// In production, we use a plugin to extract that CSS to a file, but// in development "style" loader enables hot editing of CSS. test: /\.css$/ use: require loader: require options: importLoaders: 1 loader: require options: // Necessary for external CSS imports to work // https://github.com/facebookincubator/create-react-app/issues/2677 ident: 'postcss'
into
test: /\.css$/ use: 'style-loader' loader: 'css-loader' options: modules: true loader: 'sass-loader'
- Add
sass-loader
andnode-sass
via:yarn add --dev sass-loader node-sass
Example
thiscref = r thiscref { return <div> <Collapse refs=thissetRef collapsed=false> <ul> <li> Item 1 <li> Item 2 <li> Item 3 </ul> </Collapse> <button type="button" onClick=thistoggle>Toggle</button> </div> } ReactDom
Screenshot
API reference
collapsed
( defaulttrue
): default collapse statewillToggle
,willClose
,willOpen
,onToggle
,onClose
,onOpen
: event handler before and after transitionref.close
,ref.open
,ref.toggle
: call via component reference to close, open, toggle component