React atomic components for ready to use in your projects
npm install react-atomic-compbuild folder.primary,secondary,danger,alert,success,
white.Helvetica Neue, Helvetica,Roboto,sans-serif;
Consolas, Liberation Mono, Menlo, Courier,monospace;
Georgia, serif .
default,reverse,palette,palette reverse,palette opaque and
palette opaque reversedefault,
reverse,disabled or a link button.The following paramters are used while making the button:
const Button = ({ type, ...props }) => {
const { to, href } = props;
if (to) {
return ;
}
if (href) {
return ;
}
return ;
};
Button.propTypes = {
disabled: PropTypes.bool,
palette: PropTypes.string,
transparent: PropTypes.bool,
reverse: PropTypes.bool,
height: PropTypes.number,
type: PropTypes.string,
to: PropTypes.string,
href: PropTypes.string
};
Button.defaultProps = {
palette: "primary",
type: "button",
height: 40
};
`
Above code is having a parameter named as StyledLink which is explained as below :
`
const StyledLink = styled(
({ disabled, transparent, reverse, palette, height, theme, ...props }) => (
)
)
;
`
Also, StyledButton is having the ${styles} included in it.
$3
The label defines a label for a
Here, we are using two button one for The Grid view and another one is for TheList view. Whenever the button
got active on click, the respective option got selected and displayed. Also, in its index.stories.js file
the Alert got displayed on Toggle as shown on below code.
`
storiesOf("GridListToggle", module).addWithJSX("default", () => (
default="list"
onToggle={data => {
alert(data);
}}
/>
));
`
$3
Slider with custom range is great opportunity and function to use.Create a dynamic range slider to
display the current value.Here, we made out default, reverse, disabled, responsive with breakpoints
sliders having Square Slider moving. For reference you can follow the below code as well:
`
{min}
{max}
`
$3
Rating helps in knowing the feedback from the end user from their experience and thoughts or they are
used by reviewers for ranking things.
$3
A Basic Table has only horizontal dividers but here we use the bordered table and also table with
heading and footer.We can asily add on the caption to a table. A table simply has a division of
rows and columns.
$3
A thumbnail is a small image that represents a larger image (when clicked on), and is often recognized
with a border around it. In the index.js file of the Thumbnail component we use bootstrap class
fa fa-expand and set its position as fixed .
`
render() {
return (
className={this.props.className}
style={this.props.style}
{...this.props}
>
{this.props.enlarge && (
onClick={() => {
this.props.onEnlarge();
}}
className="fa fa-expand"
aria-hidden="true"
style={{
position: "fixed",
zIndex: "900",
right: "0",
cursor: "pointer"
}}
/>
)}
{this.props.children}
);
}
`
$3
The TrayCarousel plugin is a component for cycling through elements and simply behaves like a tray of
different images or videos. The feature is quite useful in achieving the beauty of a website. The Arrow
here helps ion moving the tray images forward or backward.
$3
These Dots indicates that on which Tray of Carousel user is currently heading or working.
Organisms
$3
The bar chart we are going to create displays a list of rectangles of varying height proportional
to the values they represent. The number of bars, their values and labels are all inputs. If the
values change the heights will animate from the old to the new value.The chart has many properties that
describe how the data is displayed including color, margin and speed like in our snippet code as follows:
`
componentDidMount() {
const node = this.node;
this.myChart = new Chart(node, {
type: "bar",
data: this.props.data,
options: this.props.options
});
}
componentWillUnmount = () => {
this.myChart = {};
};
render() {
const { ...props } = this.props;
return (
);
}
`
In componentDidMount method, create a new object for chart class whose displaying and execution
type will be bar and also we are refering to the current node.
$3
A footer element typically contains:
* Authorship information
* Copyright information
* Contact information
* Sitemap
* Back to top links
* Related documents like we used footer for the Copyright information as follows:
`
const Footer = () => {
return (
Copy Rights
);
};
`
$3
A header element typically contains:
* One or more heading elements
* Logo or icon
* Authorship information
$3
The ItemBox displays the box having item listed in it with serial number and the order number.
`
const ItemBox = ({
palette,
rating,
reverse,
transparent,
addToCartClick,
...props
}) => {
return (
{...props}
style={{ backgroundPosition: "center center" }}
/>
{props.details.name}
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center"
}}
>
Serial No. - {props.details.serialNo}
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center"
}}
>
|
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center"
}}
>
Order No. - {props.details.orderNo}
{rating && (
editing={false}
name={rating.name}
value={rating.value}
emptyStarColor={rating.emptyStarColor}
starColor={rating.starColor}
starCount={rating.starCount}
/>
)}
);
};
ItemBox.propTypes = {
reverse: PropTypes.bool,
details: PropTypes.object,
transparent: PropTypes.bool,
rating: PropTypes.shape({
value: PropTypes.number.isRequired,
emptyStarColor: PropTypes.string.isRequired,
starColor: PropTypes.string.isRequired,
starCount: PropTypes.number.isRequired,
name: PropTypes.string.isRequired
}),
itemClick: PropTypes.func,
addToCartClick: PropTypes.func
};
`
Here, RatingWrapper is used for the StarRating, and CodeWrapper is helpful is displaying the
serialno and orderno.
$3
The ItemList is list of the ItemBox having multiple serial number and the order number
respective of the ItemBox.
$3
The login page should be the first page that users see in the modified application. It should provide
two text fields - one for entering a login name i.e. USERNAME and one for entering a password i.e.
PASSWORD.
In addition it should have a command button that initiates the password checking action. If either of the
text fields is left blank it is an error that must be reported to the user. If both fields are filled in
but there is no record of the user name or the password is incorrect that must also be reported to the user.
Users that have not yet registered cannot log in. They must first register by clicking on the
register button. They should be able to do this without getting an error for an empty name or password field.
The validation process for username and password can be done as:
`
validateForm = e => {
e.preventDefault();
this.setState({ submitted: true });
const username = findDOMNode(this.refs.username);
const password = findDOMNode(this.refs.password);
if (username.value && password.value) {
this.setState({ username: username.value, password: password.value });
this.props.handleLogin(
username.value,
password.value,
this.loginCallback
);
}
};
`
And
`
loginCallback = response => {
if (response) {
if (response.message) {
this.setState({ responseMessage: response.message });
}
if (response.redirectUrl) {
this.setState({ redirectUrl: response.redirectUrl });
}
}
};
`
$3
The Modal plugin is a dialog box/popup window that is displayed on top of the current page.Tooltips and
popovers can be placed within modals as needed. When modals are closed, any tooltips and popovers within
are also automatically dismissed.You can better understand the popup scenario as follows:
`
return (
id={this.props.idName}
size={this.props.size}
show={this.props.show}
onHide={() => this.props.onHide(false)}
aria-labelledby={this.props.ariaLabelledby}
>
{this.props.headerTitle && (
${this.props.idName}-title}>
{this.props.headerTitle}
)}
{this.props.children}
);
`
$3
The TrayCarousel plugin is a component for cycling through elements and simply behaves like a tray of
different images or videos. The feature is quite useful in beautifying a website.
$3
In this, there is a full fledge tree view of all the items. The important parameters used in this
component are: displayNameKey for name, onExpandedNode for expanding the node, onSelectedNode indicates
tree data last node, rootNameKey, treeData` for further classification of the children of respective root node.