react-ebi-species

EBI species icons for React

A React component to render organisms icons from the EBI-Species font declaratively. Demo of all supported species.

How to use

The component comes in two flavours:

• Using classes .icon .icon-species declared in fonts.css from the EBI Visual Framework
• A bare-bones component that you can use in any web application without depending on the EBI VF styles being loaded in your environment

The first one has the advantage that if the global CSS is changed, the component will then pick up the new styles. The second variant doesn’t need any dependency and can be used anywhere and it will just work. Notice that the second version still uses classes, but they will be uniquely scoped to the component

Instructions

To install:

npm install --save react-ebi-species

To use as a React component:

import EbiSpeciesIcon from 'react-ebi-species'
...
<EbiSpeciesIcon species={`homo sapiens`}/>

Alternatively, to use the “no class” flavour:

import { EbiSpeciesIconBare as EbiSpeciesIcon } from 'react-ebi-species'
...
<EbiSpeciesIcon species={`homo sapiens`}/>

To use as a renderer and attach the icons to DOM elements:

import { render } from 'react-ebi-species'
...
render({ species: 'homo sapiens' }, 'id-of-your-DOM-element')

Or:

import { renderBare as render } from 'react-ebi-species'
...
render({ species: 'homo sapiens' }, 'id-of-your-DOM-element')

To use directly in your browser (see the source of the demo pages):

<script src="dist/vendors.bundle.js"></script>
<script src="dist/ebiSpeciesIcon.bundle.js"></script>
<script src="dist/ebiSpeciesIconBare.bundle.js"></script>

<script>
    ebiSpeciesIcon.render({ species: 'homo sapiens' }, 'id-of-your-DOM-element')
    ebiSpeciesIcon.renderBare({ species: 'homo sapiens' }, 'id-of-your-DOM-element')
</script>

Props

The species prop should be a scientific name, although the names given in the EBI-Species documentation and other variants are available. It is case insensitive. Have a look at the demo page for details.

Prop	Type	Default value	Use case
species	string	🐰 oryctolagus cuniculus 🐰	The name of the species to be rendered
groupColors	object	{ warmBlooded: `indianred`, plants: `mediumseagreen`, other: `deepskyblue` }	Colours for groups of organisms
color	string		An optional colour that overrides groupColours

Contribute

Pull requests to enlarge the mapping of species to icons, or with alternative names of species, are very welcome! Extend the mapping as required, then test locally through

npx webpack-dev-server --mode=development

Go to localhost:9000 and see that the new icon appears there.

It is also a good idea to verify that all tests pass:

npm run testOnly

Commit and PR away.

It would be fairly easy to cut the React dependency out of this package if you just need the mapping - if you fork then we can share the species to icon mapping.

Credits

Made in the EBI for Expression Atlas.