Comments (4)
@juanpicado Let's start with just the definition file.
from react-advertising.
Here's a incomplete version I have for one of our projects, just put it in a .d.ts
file in your project:
declare module "react-advertising" {
export type Size = [width: number, height: number];
export interface SizeMapping {
/** The target view port size of the size mapping; array with two numbers for width and height */
viewPortSize: Size;
/**
* Array of ad sizes to be displayed in this view port; array of arrays with two numbers for width and height
* - ⚠️ important: this needs to be an array, even if you have only one ad size to display for this viewport size
* - If you want to display no ads for this size, specify an empty array (`[]`)
*/
sizes: Size[];
}
export interface Slot<SizeMappingName extends string> {
/** slot ID */
id: string;
/** slot's ad unit path */
path?: string;
/** configuration for removing empty slots */
collapseEmptyDivs?: boolean | boolean[];
/** targeting parameters and other key-values specific to the slot */
targeting?: Record<string, string>;
/** slot size configuration for GPT */
sizes?: unknown;
/** slot size configuration for GPT */
sizeMappingName?: SizeMappingName;
/** configuration to lazy load this ad slot */
enableLazyLoad?: unknown;
/** array with slot's Prebid configuration objects */
prebid?: unknown;
}
export interface AdvertisingConfiguration<
SizeMappings extends Record<string, SizeMapping[]>,
> {
/** global ad unit path, used if not specified in a slot */
path?: string;
/** global GPT targeting parameters and other key-values */
targeting?: Record<string, string>;
/** GPT size mapping definitions */
sizeMappings?: SizeMappings;
/** global Prebid configuration */
prebid?: unknown;
/** Turn use of Prebid on or off */
usePrebid?: boolean;
/** configuration of custom events dispatched by the creatives */
customEvents?: unknown;
/** configuration to lazy load all ads */
enableLazyLoad?: unknown;
/** array of slot configurations */
slots: Slot<keyof SizeMappings>[];
/** array of outOfPageSlot configurations */
outOfPageSlots?: { id: string }[];
}
export interface AdvertisingProviderProps {
children?: React.ReactNode;
config?: AdvertisingConfiguration;
}
export function AdvertisingProvider(
props: AdvertisingProviderProps,
): JSX.Element;
export interface AdvertisingSlotProps {
className?: string;
id: string;
style?: React.CSSProperties;
}
export function AdvertisingSlot(props: AdvertisingSlotProps): ReactElement;
}
from react-advertising.
Would this include migrate to TS? or just the definition file?
from react-advertising.
Please someone else take it, I won't be able to work on it this month, otherwise, I'll pick it up again next month if still open.
from react-advertising.
Related Issues (20)
- Update readme to clearly link to the NPM package
- Recent releases are on NPM but not on the Github releases page
- chore: use testing-library instead of Enzyme
- chore: Upgrade to webpack 5
- No DFP request in the second page (or refresh) of a gatsby site HOT 1
- docs: Update documentation to include new features from version 4 HOT 1
- fix: “Window is not defined” error when rendering on the server
- feat: Configuration option to disable Prebid
- test: Set up E2E tests
- test: E2E test for lazy loading
- docs: Add a wiki page for contributors
- fix: this.queue.push is not a function HOT 2
- docs: Version 4 IE11 compatibility HOT 1
- Lazy loading does not work properly on Safari
- Error messages are suppressed in the console
- Add publish registry to package.json
- react-advertising with react native
- singleRequest doesn't work in any versions after 3.0.2 HOT 1
- Size Mapping not working HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-advertising.