Some content
\nerror
}\n loading={(props) =>loading
}\n >\nSome content
\n{}|false|{
transform: 'translateY(-100px)',
}|_css inline styles applied to the off state_|\n|`onState`|{}|false|{
transform: 'translateY(0)',
}|_css inline styles applied to the on state_|\n|`replaceStyle`|{}|false|{
position: 'fixed',
background: 'rgba(0, 0, 0, 0.8)',
width: '100%',
top: 0,
left: 0,
}|_completely replace all styles_|\n|`sizes`|{
isSemiStickyActive: boolean,
}|true|-|_inherited sizing info_|\n|`style`|{}|false|-|_shallowly merge styles_|\n|`top`|`number`|false|200|_distance from the document top to engage the on state styles_|\n|`transitionSpeed`|`number`|false|0.25|_the speed of the transition_|\n|`transitionTiming`|| 'ease'
| 'linear'
| 'ease-in'
| 'ease-out'
| 'ease-in-out'
| 'step-start'
| 'step-end'|false|'ease'|_the transition timing function_|\n# LazyImage\n\nA component for lazily loading images\n\n## Usage\n\n```js\n{}|false|{
margin: 0,
padding: 0,
width: '100%',
height: 'auto',
backfaceVisibility: 'inherit',
}|_base styles applied to all elements_|\n|`className`|`string`|true|-|_class name applied to the components in BEM style_|\n|`containerStyle`|{}|false|{
position: 'relative',
overflow: 'hidden',
// fix for image element whitespace
lineHeight: 0,
}|_shallow merge of styles applied to the container_|\n|`imageStyle`|{}|false|{}|_shallow merge of styles applied to the highres_|\n|`name`|`string`|false|-|_name attribute for onclick events_|\n|`onClick`|`Function`|false|-|_pass-thru onclick function_|\n|`placeholder`|`string`|true|-|_placeholder image src_|\n|`placeholderStyle`|{}|false|{
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
objectFit: 'contain',
transition: '0.25s opacity',
}|_shallow merge of styles applied to the placeholder_|\n|`src`|`string`|true|-|_high-res image src_|\n|`title`|`string`|false|-|_pass-thru title tag for image_|\n### Modal\n\nModal creates ... a modal. It uses `ReactDOM.createPortal` so it renders your element outside of the HTML tree. However it is still controlled by whichever react parent component it is used in. By default Modal renders to the id 'modal-root'. Please be sure to add 'modal-root' to your HTML file or else nothing will be rendered by this component.\n\nThe default export from Modal is the styled modal. It contains background, transitions and all sorts of fun inline css. If you would like to use only the portal creation you can find it as a named export `UnstyledModal`.\n\n```js\nimport { Modal, UnstyledModal } from 'njmyers-component-library';\n```\n\n#### Usage\n\nSimply add your children and use the parent component to control the status as 'on' or 'off'.\n\n```js\nimport React from 'react';\nimport { Modal } from 'njmyers-component-library';\n\nclass ModalParent extends React.Component {\n state = {\n status: 'on'\n }\n\n turnOffModal = () => {\n this.setState({\n status: 'off'\n })\n }\n\n componentDidMount() {\n setTimeout(this.turnOffModal, 4000)\n }\n\n render() {\n return (\n Annoying advertisement
\n \n )\n }\n}\n```\n\nIn the above example, the 'annoying advertisement' will render itself in aside under the 'modal-root' id for 4 seconds and then will animate to its offState styles. When ModalParent unmounts the modal component will be removed from 'modal-root'.\n\n\n\n## Props\n| Prop Name | Type | Required | Default Value | Description |\n|:----------|:-----|:---------|:--------------|:------------|\n|`children`|`ReactNode`|false|-|_react children (your component)_|\n|`className`|`string`|false|-|_className applied to the container element_|\n|`modalRoot`|`string`|false|'modal-root'|_div id where to render the react portal_|\n|`offState`|{}|false|{
opacity: 0,
}|_css inline styles applied to the off state_|\n|`onState`|{}|false|{
opacity: 1,
}|_css inline styles applied to the on state_|\n|`replaceStyle`|{}|false|{
background: 'rgba(255, 255, 255, 0.8)',
position: 'fixed',
width: '100%',
height: '100%',
top: 0,
left: 0,
bottom: 0,
right: 0,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}|_completely replace all styles_|\n|`status`|'on' | 'off'|false|'off'|_display status of the styled modal_|\n|`style`|{}|false|{}|_shallowly merge styles_|\n|`transitionSpeed`|`number`|false|0.25|_the speed of the transition_|\n|`transitionTiming`|| 'ease'
| 'linear'
| 'ease-in'
| 'ease-out'
| 'ease-in-out'
| 'step-start'
| 'step-end'|false|'ease'|_the transition timing function_|\n|`zIndexOff`|`number`|false|-20|_z-index of the modal when off_|\n|`zIndexOn`|`number`|false|1|_z-index of the modal when on_|\n### BEM\n\n#### Background (Frustration)\n\nI've read many articles about using BEM syntax. As I understand it the main points are as follows.\n\n1. BEM syntax reduces css specificity (GOOD)\n2. BEM syntax can be implemented easily with preprocessors (GOOD)\n3. BEM syntax makes your HTML or Components look ugly (BAD!)\n\nIf you stick to BEM syntax then you end up with a React Component like this\n\n```js\n\n Text\n
\n```\n\nAnd sass or scss that looks like this\n\n```scss\n.block\n &_element\n &-modifier\n &-otherModifier\n```\n\nThe sass looks like great IMHO but the markup looks terrible. How you want to write your sass or scss is a topic for another conversation. All of the aforementioned articles then proceed to explain how they have made adjustments on the BEM syntax so that it is easier to read. Usually this means creating shorter classNames and using tricks.\n\nTODO ADD EXAMPLE\n\n```js\n```\n\n```scss\n```\n\nNow of course this is a good thing as we want our source code to be cleaner and easier to read. However it comes at the cost of possible reducing the specificity of your compilied css code. Why do we have to make a sacrifice?\n\n#### Solution\n\nNow we have a brand new component for writing BEM classNames to your components. We hopefully get the best of both worlds by being able to using the full power of BEM in terms of specificity while using a much cleaner syntax in React. Behold the power of `