Nonconformist Propaganda Machine

    rn-media-query-hook
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.3 • Public • Published

    rn-media-query-hook

    npm version npm downloads npm npm

    React Native Media Query Hook

    Demo :

    https://snack.expo.dev/@fateh999/rn-media-query-hook

    Steps to install :

    npm install rn-media-query-hook

    or

    yarn add rn-media-query-hook
    import useMediaQuery from "rn-media-query-hook";
    
    // In functional component
    const { mediaQuery, mediaQueryLogic } = useMediaQuery();

    or

    import useMediaQuery from "rn-media-query-hook";
    
    // In functional component
    const { mQ, mQL } = useMediaQuery();

    Usage :

    // For dimensions
    const responsiveWidth = mQ([100, 200, 300, 400, 500]);
    
    // order is important [base, sm, md, lg, xl]
    
    // or
    
    const responsiveWidth = mQ({ base: 100, sm: 200, md: 300, lg: 400, xl: 500 });
    
    // For any logic
    const show = mQL([true, true, true, false, false]);
    
    // order is important [base, sm, md, lg, xl]
    
    // or
    
    const show = mQ({ base: true, sm: true, md: true, lg: false, xl: false });

    Default Breakpoints :

    const initialBreakPoints: BREAK_POINTS = {
      base: 0,
      sm: 480,
      md: 768,
      lg: 992,
      xl: 1280,
    };

    Custom Breakpoints :

    const newBreakPoints: BREAK_POINTS = {
      base: 0,
      sm: 380,
      md: 868,
      lg: 892,
      xl: 1180,
    };
    
    // In functional component
    
    const { mediaQuery, mediaQueryLogic } = useMediaQuery(newBreakPoints);

    Note :

    • Only base dimension or logic is required, rest are optional

    fateh999




    Install

    npm i rn-media-query-hook

    DownloadsWeekly Downloads

    20

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    7.41 kB

    Total Files

    5

    Last publish

    Collaborators

    • fateh_farooqui9