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

Configuration

The Details component expects the following props.

| Parameter | Default | | | :-------------- | :-------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------- | | summaryContent | undefined | The summary component, can be a string or react component | | open | false | Should be open or not | | onToggle | A function (toggle) => {} | Returns the toggle value true or false | | styles | Object | Possible to override the css class. Can pass css module object as well. Example: { details: styles.details, summary: styles.summary } | | children | undefined | Whatever react component or string you would like | | html attributes | undefined | You 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