1.0.4 • Published 3 years ago

react-details v1.0.4

Weekly downloads
187
License
MIT
Repository
-
Last release
3 years ago

React-Details

This is a <details> HTML wrapper - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

Install

$ npm i --save react-details

Usage

import Details from 'react-details';

function App() {
    return (
        <Details
            summaryContent={<span>React Details</span>}
            onToggle={console.log}
            open
        >
            <p>
                This is a HTML details wrapper. For more information please
                visit{' '}
                <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details">
                    MDN: details
                </a>
                .
            </p>
        </Details>
    );
}

Visuals

Visuals

Configuration

The Details component expects the following props.

ParameterDefault
summaryContentundefinedThe summary component, can be a string or react component
openfalseShould be open or not
onToggleA function (toggle) => {}Returns the toggle value true or false
stylesObjectPossible to override the css class. Can pass css module object as well. Example: { details: styles.details, summary: styles.summary }
childrenundefinedWhatever react component or string you would like
html attributesundefinedYou can pass whatever props you would like from this list https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes

Test this repository

Simply by following these steps:

  1. Clone the repository
  2. Run npm run demo
  3. Open index.html in your browser
  4. The styling from the gif lives in index.html

LICENSE

MIT - © Bjarne Oeverli - See LICENSE