react-fit

WebJar for react-fit

License	MIT
Categories	React User Interface Web Frameworks
GroupId	org.webjars.npm
ArtifactId	react-fit
Last Version	1.0.5
Release Date	Dec 1, 2019
Type	jar
Description	react-fit WebJar for react-fit
Project URL	http://webjars.org
Source Code Management	https://github.com/wojtekmaj/react-fit

Download react-fit

Filename	Size
react-fit-1.0.5.pom
react-fit-1.0.5.jar	13 KB
react-fit-1.0.5-sources.jar	22 bytes
react-fit-1.0.5-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/react-fit/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>react-fit</artifactId>
    <version>1.0.5</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/react-fit/
implementation 'org.webjars.npm:react-fit:1.0.5'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/react-fit/
implementation ("org.webjars.npm:react-fit:1.0.5")

Apache Buildr

'org.webjars.npm:react-fit:jar:1.0.5'

Apache Ivy

<dependency org="org.webjars.npm" name="react-fit" rev="1.0.5">
  <artifact name="react-fit" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='react-fit', version='1.0.5')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "react-fit" % "1.0.5"

Leiningen

[org.webjars.npm/react-fit "1.0.5"]

Dependencies

compile (2)

Group / Artifact	Type	Version
org.webjars.npm : detect-element-overflow	jar	[1.1.1,2)
org.webjars.npm : prop-types	jar	[15.6.0,16)

Project Modules

There are no modules declared in this project.

React-Fit

A component that aligns its child relatively to its parent while being aware where it may and may not fit.

tl;dr

• Install by executing npm install react-fit or yarn add react-fit.
• Import by adding import Fit from 'react-fit'.
• Do stuff with it!

  const ElementWithChild = () => (
    <Parent>
      <Fit>
        <PopoverChild />
      </Fit>
    </Parent>
  );

Getting started

Compatibility

Your project needs to use React 15.5 or later.

A bug in React 16.5.x causes React-Fit to crash on browsers not supporting display: contents. While React-Fit will continue to work on React 16.5.x, it's highly recommended that you either upgrade to ^16.6.0 or downgrade to <=16.4.2.

How does it work?

1. By default, the element provided to <Fit /> as a child is displayed below its parent, aligned to the left.
2. If the element can't fit in this position and collides with bottom and/or right border of the container, <Fit /> checks if there's more space for the element on the other side(s) of the axis/axes the collision(s) has been detected on. If so, the element is moved above its parent and/or aligned to the right, depending on the collision axis.
3. If the element still can't fit where it's placed, <Fit /> decreases the element's size. If min-width/min-height are provided, they will be respected.

Positioning the element

Vertical axis (default)

By default, the element is displayed below its parent, aligned to the left of its parent.

┌────────────┐
│   Parent   │
├────────────┴────────────┐
│                         │
│         Child           │
│                         │
└─────────────────────────┘

• To display the element above: provide invertAxis flag.
• To align the element to the right: provide invertSecondaryAxis flag.

Horizontal axis (mainAxis="x")

By providing mainAxis="x" to <Fit />, the element is displayed on the right of its parent, aligned to the top of its parent.

┌────────────┬─────────────────────────┐
│   Parent   │                         │
└────────────┤         Child           │
             │                         │
             └─────────────────────────┘

• To display the element on the left: provide invertAxis flag.
• To align the element to the bottom: provide invertSecondaryAxis flag.

Spacing

By default, React-Fit leaves 8px of space between its child and the borders of the container.

┌──────────────────────────────────────────┐
│ ┌────────────┐                           │
│ │   Parent   │                           │
│ ├────────────┴────────────┐              │
│ │                         │              │
│ │         Child           │              │
│ │                         │              │
│ └─────────────────────────┘              │
└──────────────────────────────────────────┘

If you wish to change this spacing, you can provide spacing to <Fit />. For example, if you wish for the child to touch the borders of the container, decrease the spacing by providing spacing={0} to <Fit />.

┌──────────────────────────────────────────┐
│ ┌────────────┐                           │
│ │   Parent   │                           │
│ ├────────────┴────────────┐              │
│ │                         │              │
│ │         Child           │              │
│ │      (now higher)       │              │
│ │                         │              │
└─┴─────────────────────────┴──────────────┘

You can also provide different spacing for each side by providing an object, for example spacing={{ top: 10, bottom: 20, left: 30, right: 40 }}, to <Fit />. Note: Memoize the object or define it outside render function to avoid unnecessary re-renders.

License

The MIT License.

Author

Wojciech Maj [email protected] http://wojtekmaj.pl

Versions

Version
1.0.5 Dec 1, 2019