diff --git a/types/react-sticky-el/index.d.ts b/types/react-sticky-el/index.d.ts new file mode 100644 index 0000000000..b41d48c454 --- /dev/null +++ b/types/react-sticky-el/index.d.ts @@ -0,0 +1,134 @@ +// Type definitions for react-sticky-el 1.0 +// Project: https://github.com/gm0t/react-sticky-el +// Definitions by: Justin Braithwaite +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.6 + +import * as React from "react"; + +export default Sticky; + +declare class Sticky extends React.Component {} + +declare namespace Sticky { + interface Props + extends React.HTMLAttributes { + /** + * 'top' or 'bottom' - to which side element should stick. + * + * Defaults to 'top'. + */ + mode?: "top" | "bottom"; + + /** + * Allows you to disable sticking by setting this prop to `true`. + * + * Defaults to `false`. + */ + disabled?: boolean; + + /** + * This handler will be called right before changing `fixed` state. + * + * Defaults to `null`. + */ + onFixedToggle?: (fixed: boolean) => void; + + /** + * Anything that can be used by `React.createElement`. Used for `wrapper + * element`. If you want to use some custom component, please be sure that + * you don't lose `style` and `className` props. + * + * Defaults to 'div'. + */ + wrapperCmp?: keyof React.ReactHTML | React.ReactElement; + + /** + * Anything that can be used by React.createElement. Used for holder + * element. If you want to use some custom component, please be sure that + * you don't lose style and className props. + * + * Defaults to 'div'. + */ + holderCmp?: keyof React.ReactHTML | React.ReactElement; + + /** + * These props will be used to create `holderElement`. + */ + holderProps?: HolderProps; + + /** + * Selector to define a `boundaryElement`. It should be one of the parents + * of the current element. + * + * Defaults to `null`. + */ + boundaryElement?: string; + + /** + * Selector to define a `scrollElement`. All position checks will be + * performed according to this element, also it will be listened for + * 'scroll' event. + * + * It should be one of the parents of the current element. Possible + * selectors: 'body', 'window', '#{id}', anything suitable for + * `Element.matches`. + * + * Defaults to `window`. + */ + scrollElement?: string; + + /** + * If your DOM structure is mutating (you are adding/removing elements), it + * will be usefull to provide `positionRecheckInterval` greater than zero, + * in this case position check will be also performed using setInterval in + * addition to scroll events. + * + * Defaults to `0`. + */ + positionRecheckInterval?: number; + + /** + * In the event that you wish to override the style rules applied, simply + * pass in the style object as a prop. + * + * Note: You likely want to avoid messing with the following attributes in + * your stickyStyle: `left`, `top`, and `width`. + */ + stickyStyle?: React.CSSProperties; + + /** + * You can also specify a class name to be applied when the element becomes + * sticky. + * + * Defaults to 'sticky'. + */ + stickyClassName?: string; + + /** + * Sticky state will be triggered when the top of the element is `topOffset` + * pixels from the top of the `scrollElement`. Positive numbers give the + * impression of a lazy sticky state, whereas negative numbers are more + * eager in their attachment. + * + * Defaults to `0`. + */ + topOffset?: number; + + /** + * Sticky state will be triggered when the bottom of the element is + * `bottomOffset` pixels from the bottom of the `scrollElement`. + * + * Defaults to `0`. + */ + bottomOffset?: number; + + /** + * If `false` then boundaryEl should have position: relative. In this case + * sticky element won't disappear on reaching it's boundaries. + * + * Defaults to `true`. + */ + hideOnBoundaryHit?: boolean; + } +} diff --git a/types/react-sticky-el/react-sticky-el-tests.tsx b/types/react-sticky-el/react-sticky-el-tests.tsx new file mode 100644 index 0000000000..522802945a --- /dev/null +++ b/types/react-sticky-el/react-sticky-el-tests.tsx @@ -0,0 +1,23 @@ +import * as React from "react"; +import Sticky from "react-sticky-el"; + +const StickyBasic = () => ; +const StickyAllFeatures = () => ( + fixed} + wrapperCmp="div" + holderCmp={
} + holderProps={{ title: "a title" }} + boundaryElement=".an-element" + scrollElement=".another-element" + positionRecheckInterval={0} + stickyStyle={{ display: "block" }} + stickyClassName="sticky" + topOffset={0} + bottomOffset={0} + hideOnBoundaryHit + children="a child" + /> +); diff --git a/types/react-sticky-el/tsconfig.json b/types/react-sticky-el/tsconfig.json new file mode 100644 index 0000000000..31843c62b4 --- /dev/null +++ b/types/react-sticky-el/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": ["es6"], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../", + "jsx": "react", + "typeRoots": ["../"], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": ["index.d.ts", "react-sticky-el-tests.tsx"] +} diff --git a/types/react-sticky-el/tslint.json b/types/react-sticky-el/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/react-sticky-el/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }