Security News
GitHub Removes Malicious Pull Requests Targeting Open Source Repositories
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
@react-md/transition
Advanced tools
A package for working with react-md to use some simple transitions.
Create simple CSS transitions using the provided transition hooks and components utilizing the default transition timing functions. This package also provides a collapse transition, scaling transition, vertical only scaling transition, and a new page transition named cross fade.
Provided components and hooks:
Collapse
or useCollapseTransition
- transition an element in and out of
view based on the height of the elementCrossFade
or useCrossFadeTransition
- a transition generally used for a
full page transition that fades and slightly moves a child component into viewScaleTransition
or useScaleTransition
- transition an element in and out
of view with a scale
transform that can be updated to just be scaleY
useTransition
- a hook implementation of the Transition
component from
react-transition-group
CSSTransition
or useCSSTransition
- allows for a CSS transition that was
heavily inspired by react-transition-group
useFixedPositioning
- hooks into the CSSTransition
component from to fix
an element to another element within the viewportThe rmd-transition-shadow-transition
mixin allows you to "performantly"
transition between two box shadow values using the
opacity trick. This
mixin automatically creates a pseudo ::before
or ::after
element with the
final box shadow and animates the opacity once one of the $active-selectors
are triggered. The code below will help explain this part a bit more.
npm install --save @react-md/transition
It is also recommended to install the following packages as they work hand-in-hand with this package:
npm install --save @react-md/theme \
@react-md/utils
You should check out the full documentation for live examples and more customization information, but an example usage is shown below.
import type { useState } from "react";
import { render } from "react-dom";
import { Button } from "@react-md/button";
import { Collapse } from "@react-md/transition";
const App = () => {
const [collapsed, setCollapsed] = useState(true);
return (
<>
<Button onClick={() => setCollapsed(!collapsed)}>Toggle</Button>
<Collapse collapsed={collapsed}>
<div>This is my collapsible content!</div>
</Collapse>
</>
);
};
render(<App />, document.getElementById("root"));
FAQs
A package for working with react-md to use some simple transitions.
The npm package @react-md/transition receives a total of 769 weekly downloads. As such, @react-md/transition popularity was classified as not popular.
We found that @react-md/transition demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.