This is a component and module library for databyss applications.
The goals of the package are
- to allow application developers to easily build new applications or features
- and to provide, through documented recommendations and examples, standards of semantics, aesthetics and accessibility across all databyss applications.
Component library docs are available at
https://databyss-styleguide.herokuapp.com
Module demos are available at
https://databyss-stories.herokuapp.com
To use databyss-ui
components or modules in your project, you may import them in one of two ways.
If your ES6 configuration doesn't match that of the databyss-ui
package, use the following format to import components pre-transpiled with babel-preset-env
:
import { BackButton } from '@databyss-org/databyss-ui'
If you want to import the components directory, without any transpile stage, use this format:
import PageHeading from '@databyss-org/databyss-ui/components/Heading/PageHeading'
You'll also need to wrap your components in a ThemeProvider
component from the react-jss
package:
import { theme } from '@databyss-org/databyss-ui'
export default () => (
<ThemeProvider theme={theme}>
<PageHeading>Jacques Derrida on "Abyss"</PageHeading>
</ThemeProvider>
)
Alternatively, if you're render a fullscreen module or component, you can use the ThemedViewport
component, which uses the default theme if none is specified:
import { ThemedViewport } from '@databyss-org/databyss-ui'
export default () => (
<ThemedViewport>
<PageHeading>Jacques Derrida on "Abyss"</PageHeading>
</ThemedViewport>
)
The databyss-ui package uses JSS and react-jss for rendering styles and managing themes.
Shared themes variables and macros are in src/theming
.
With Webpack, using static assets like images works similarly to CSS.
You can import
a file right in a JavaScript module. This tells Webpack to include that file in the bundle. Unlike CSS imports, importing a file gives you a string value. This value is the final path you can reference in your code, e.g. as the src
attribute of an image or the href
of a link to a PDF.
To reduce the number of requests to the server, importing images that are less than 10,000 bytes returns a data URI instead of a path. This applies to the following file extensions: bmp, gif, jpg, jpeg, and png. SVG files are excluded due to #1153.
Here is an example:
import React from 'react'
import logo from './logo.png' // Tell Webpack this JS file uses this image
function Header() {
// Import result is the URL of your image
return <img src={logo} alt="Logo" />
}
export default Header
This ensures that when the project is built, Webpack will correctly move the images into the build folder, and provide us with correct paths.