https://github.com/marouanekadiri/react-relative-container
This repository allows you to build responsive components that adapt its style and content based on the size of its container.
https://github.com/marouanekadiri/react-relative-container
container-query css reactjs responsive styled-components
Last synced: about 1 month ago
JSON representation
This repository allows you to build responsive components that adapt its style and content based on the size of its container.
- Host: GitHub
- URL: https://github.com/marouanekadiri/react-relative-container
- Owner: marouanekadiri
- License: mit
- Created: 2020-11-12T15:29:22.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2020-11-16T13:04:37.000Z (over 5 years ago)
- Last Synced: 2026-02-22T10:39:22.520Z (4 months ago)
- Topics: container-query, css, reactjs, responsive, styled-components
- Language: JavaScript
- Homepage:
- Size: 59.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# **React Relative Container**
Make your component responsive everywhere.
This repository allows you to build responsive components that adapt its style and content based on the size of its container.
## Installation
```sh
npm i -s react-relative-container
```
## Demo
[See examples](https://codesandbox.io/s/react-relative-container-ymihr)
## Usage
Make sure you have forwarded ref to a specific dom element that you want to observe its size change
```jsx
const Parent = React.forwardRef((props, ref) => (
)
```
Wrap the container that you want to observe
```jsx
import { RelativeContainer } from 'react-relative-container'
const Container = RelativeContainer(Parent)
```
Define your custom breakpoints that you want your component to change when we have
```jsx
const S = ({ width }) => width < 400
const M = ({ width }) => width < 700 && width >= 400
const L = ({ width }) => width < 1000 && width >= 700
```
Let say this is your child component
```jsx
const Child = props => {
return S(props.rcsize) ?
i'm small
:
i'm medium or large
}
```
Apply breakpoints to your child components
```jsx
import { ObserveRCSizeOn } from 'react-relative-container'
const ResponsiveChild = ObserveRCSizeOn(S)(Child) // You can listen to S only
// or
const ResponsiveChild = ObserveRCSizeOn(S, M)(Child) // You can listen to S and M only
// or
const ResponsiveChild = ObserveRCSizeOn(S, M, L)(Child) // You can listen to S, M and L
```
Now all together
```jsx
const Example = () => {
return (
)
}
// Or
const Example = () => {
return (
)
}
// They both observe size changes of the container
```
## Usage with `styled-components`
This library provides some api to easily work with styled component
```jsx
import { styledRCMatches } from 'react-relative-container'
// Wrap your container with your styled container
const Container = RelativeContainer(
styled.div``
)
// breakpoint conditions
const S = ({ width }) => width < 200
const M = ({ width }) => width < 300
const L = ({ width }) => width < 400
// Your responsive child
const ResponsiveChild = ObserveRCSizeOn(S, M, L)(
styled.div`
background-color: grey;
${styledRCMatches(L)(
css`
background-color: yellow;
font-size: 16px;
`
)}
${styledRCMatches(M)(
css`
background-color: yellow;
font-size: 16px;
`
)}
${styledRCMatches(S)(
css`
background-color: blue;
font-size: 10px;
`
)}
`
)
// This could be your component
const Example = () => {
return (
Hello world
)
}
```
Lets assume we have a Page that is like this
```jsx
const grow = keyframes`
from {
width: 100px
}
to {
width: 500px;
}
`
const PageContainer = styled.div`
width: 500px;
animation: ${grow} linear 1s;
`
const Page = () => {
return (
)
}
```
**Results**
## API Documentation
WIP
## Contributing
Contributions are welcomed!
## Licensing
This project is licensed under the MIT License. See [LICENSE](LICENSE) for more information.