0.0.12 • Published 5 years ago
@c8s/toc v0.0.12
@c8s/toc
Usage
/**
* As to prepare of using the `Toc`
*
* ```bash
* yarn add @c8s/toc react @types/react
* ```
*/
import Toc, {TocItemProps} from '@c8s/toc';
Example
(() => {
const toc = new Toc();
const AComponent: React.SFC<TocItemProps<HTMLDivElement>> = props => {
return (
<div ref={props.ariaRef} style={{paddingBottom: 1000}}>
{props.title}
</div>
);
};
const list = [{title: 'foo'}, {title: 'bar'}, {title: 'baz'}];
return (
<Toc.provider toc={toc}>
<>
<ul>
<Toc.consumer>
{({items}) => {
return items.map(item => {
return (
<li
key={item.title}
style={{
color: item.selected ? 'orange' : 'inherit',
}}
onClick={item.scroll}
>
{item.title}
</li>
);
});
}}
</Toc.consumer>
</ul>
<div>{list.map(toc.bind(AComponent))}</div>
</>
</Toc.provider>
)
})();
Contributors
Thanks goes to these wonderful people (emoji key):
純📖 | Aki-Japan📖 |
---|
This project follows the all-contributors specification. Contributions of any kind welcome!