Codestacks React Styled-component media

| Version | Styled-component | React | |---------|------------------|-------------| | 6.x | 6.x | ^18.3 |

Features

• Use React + Styled-component and styled-component themeProvider
• Easier to use
• Refer to the design of Bootstrap 5 and change it to CSS IN JS method
• Provide RWD Media query method
• Support NextJS 14 (v5.0.3+)

Installation

yarn add styled-components @codestacks/react-styled-component-media

in your packages. (Make the version of styled-component you use match the version of styled-component used in acrool-react-gird)

{
    "resolutions": {
        "styled-components": "6.1.17"
    }
}

in your App.js add
see the example/src/App.js

import {GridThemeProvider, IGridSetting} from '@codestacks/react-styled-component-media';


const gridTheme: IGridSetting = {
    gridBreakpoints: {
        xs: 0,
        sm: 576,
        md: 768,
        lg: 992,
        xl: 1200,
        xxl: 1540,
    },
   
}


<GridThemeProvider gridTheme={gridTheme}>
    <App/>
</GridThemeProvider>

Examples

use in your page/component:

import {media} from '@codestacks/react-styled-component-media';

const MyPage = () => {
    return (
        <div>
            <MyTitle>react-styled-component-media</MyTitle>
            <Desc isVisible={false}>myDesc</Desc>
        </div>
    );
}

// use rwd
const MyTitle = styled.div`
    font-size: 12px;
    ${media.md`
        font-size: 14px;
    `}
`

// use rwd props
const Desc = styled.div<{
    isVisible: boolean
}>`
    ${props => media.md`
        display: ${props.isVisible ? 'block': 'flex'}
    `}
    
    // or
    ${props => css`
        font-size: 12px;
        ${media.md`
            display: ${props.isVisible ? 'block': 'flex'}
        `}
    `}
`

MediaConsumer

<MediaConsumer sizes={['xxl']}>
    {(mediaSize)=> {

        if(mediaSize === 'xxl'){
            return <Marquee
                autoFill
                play={hoverId === null}
                className="py-8"
            >
                {renderCards(true)}
            </Marquee>;
        }


        return <Container fluid>
            <Flex column className="gap-8">
                {renderCards(false)}
            </Flex>
        </Container>;
    }}
</MediaConsumer>

There is also a storybook that you can play with it: