Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
boron-15
Advanced tools
Readme
A collection of dialog animations with React.js.
This is the fork of boron that provides React 15+ support
Live demo: yuanyan.github.io/boron
To build the examples locally, run:
npm install
gulp dev
Then open localhost:9999
in a browser.
The easiest way to use boron
is to install it from NPM and include it in your own React build process (using Browserify, etc).
You can also use the standalone build by including dist/boron.js
in your page. If you use this, make sure you have already included React, and it is available as a global variable.
npm install boron-15 --save
import React from 'react';
import {DropModal} from 'boron-15';
class App extends React.Component {
constructor(props) {
super(props);
this.showModal = this.showModal.bind(this);
this.hideModal = this.hideModal.bind(this);
}
showModal() {
this.refs.modal.show();
}
hideModal() {
this.refs.modal.hide();
}
render() {
return (
<div>
<button onClick={this.showModal}>Open</button>
<DropModal ref="modal">
<h2>I am a dialog</h2>
<button onClick={this.hideModal}>Close</button>
</DropModal>
</div>
);
}
}
export default App;
Note: If the hide() method is called directly, a custom source string can be passed as the argument, as noted above. For example, this might be useful if if multiple actions could cause the hide and it was desirable to know which of those actions was the trigger for the given onHide callback).
Objects consisting of CSS properties/values can be passed as props to the Modal component. The values for the CSS properties will either add new properties or override the default property value set for that Modal type.
Modal with 80% width:
var Modal = require('boron-15/ScaleModal');
// Style object
var modalStyle = {
width: '80%'
};
var Example = React.createClass({
showModal: function(){
this.refs.modal.show();
},
hideModal: function(){
this.refs.modal.hide();
},
render: function() {
return (
<div>
<button onClick={this.showModal}>Open</button>
<Modal ref="modal" modalStyle={modalStyle}>
<h2>I am a dialog</h2>
<button onClick={this.hideModal}>Close</button>
</Modal>
</div>
);
}
});
Red backdrop with a blue modal, rotated at 45 degrees:
var Modal = require('boron-15/FlyModal');
// Individual styles for the modal, modal content, and backdrop
var modalStyle = {
transform: 'rotate(45deg) translateX(-50%)',
};
var backdropStyle = {
backgroundColor: 'red'
};
var contentStyle = {
backgroundColor: 'blue',
height: '100%'
};
var Example = React.createClass({
showModal: function(){
this.refs.modal.show();
},
hideModal: function(){
this.refs.modal.hide();
},
render: function() {
return (
<div>
<button onClick={this.showModal}>Open</button>
<Modal ref="modal" modalStyle={modalStyle} backdropStyle={backdropStyle} contentStyle={contentStyle}>
<h2>I am a dialog</h2>
<button onClick={this.hideModal}>Close</button>
</Modal>
</div>
);
}
});
Boron is MIT licensed.
FAQs
A collection of dialog animations for React 15+
The npm package boron-15 receives a total of 285 weekly downloads. As such, boron-15 popularity was classified as not popular.
We found that boron-15 demonstrated a not healthy version release cadence and project activity because the last version was released 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.