marine-ui-react
marine themed ui elements for react
Install
npm install --save marine-ui-react
Usage
import React Component from 'react' import AnchorButton BlowfishButton CompassButton BorderButton CrabButton DolphinButton FishButton LobsterButton OctopusButton SeahorseButton SharkButton ShellButton from 'marine-ui-react' { return <div> <AnchorButton /> <BlowfishButton/> <CompassButton/> <BorderButton/> <CrabButton/> <DolphinButton/> <FishButton/> <LobsterButton/> <OctopusButton/> <SeahorseButton/> <SharkButton/> <ShellButton/> </div> }
Some props you can pass to the buttons are:
size=1btnStyle=your: "custom style"width="20px"backgroundColor="#ff0"fontColor="#ff0"fontFamilyfontSizeonClickonMouseEnteronMouseLeavebtnClassnameiconClassnameiconWidthiconHeighticonStylebordertype
You also have access to an HOC wich you can pass your own svg to create a button. The created button accepts all of the above props.
import YourSVG from './../mySvgReactComponent';import ButtonHoc from 'marine-ui-react';YourSVG;
just make sure the svg accepts conditional props like below:
// within your svg componentwidth=propswidth || "65%"height=propsheight || "100%"style=backgroundColor: propsbackgroundColor|| "#fff"className=propsiconClassName || "anchorIcon"
There is also a responsive image component:
import myImage from 'myImage.png';import React Component from 'react' import ResponsiveImage from 'marine-ui-react' { return <div> <ResponsiveImage = = =/> </div> }
License
MIT © karangejo