markdown-body entry-content container-lg" itemprop="text">

Caution

Hi there!

I'm sorry, but this library has been discontinued and will no longer be updated. We have migrated our applications to use Fluent and will no longer maintain this repository. This means you will need to switch out your current React components for Fluent components.

We are also publishing our own Fluent components and theme. We look forward to seeing you there. Feel free to open an issue there if you have any questions.

Practical react components

A catalogue of React components, focused on ease-of-use.

To install the core package, run:

yarn add practical-react-components-core

This contains all the core components. All the icons are located in a separate practical-react-components-icons package.

Dependencies

Practical react components is dependent on some packages, in addition to react and react-dom, that need to be installed for it to work. Make sure the following packages are installed:

yarn add styled-components
yarn add react-transition-group
yarn add pepjs

If you are using practical-react-components-formik you also need to make sure the following packages are installed:

yarn add formik

Typescript

Install additional typings:

yarn add @types/styled-components

If you use Typescript and want to use styled-components, you need to add a file to your source directory, e.g.:

styled-components.d.ts

with the following contents:

import 'styled-components'
import { Theme } from './theme'

declare module 'styled-components' {
  export interface DefaultTheme extends Theme {}
}

in which case you should get proper typings for the theme prop in your own styled components.

Make sure this file is included in your tsconfig.json files, e.g. "include": ["src/styled-components.d.ts", "./src/index.ts"].

Electron

If you are using Practical react components with an Electron app you might have to add the following lines in the root of you package.json file.

"electronWebpack": {
  "whiteListedModules": [
    "practical-react-components-core",
    "styled-components"
  ]
}

Usage

Practical react components makes use of contexts to provide theme and toast creators. To make it possible to use the components, you need to wrap your app in a PracticalProvider.

On the provider you can optionally specify a theme and behaviors for toasts.

export const Entry: React.FC = () => {
  return (
    <PracticalProvider>
      <App />
    </PracticalProvider>
  )
}

In your app, you can then start using Practical react components:

export const App: React.FC = () => {
  const [text, setText] = useState()
  const { showSuccessToast } = useToasts()

  return (
    <AppContainer>
      <TextInput onValueChange={setText} />
      <SpaceBlock variant={16} />
      <Button
        label="Yay"
        onClick={() => showSuccessToast({ label: `You wrote: ${text}` })}
      />
    </AppContainer>
  )
}

For more information on what components are available and how to use them please visit the documentation.

License

Code and icons in these packages are licensed under the MIT license, except for icons in practical-react-components-icons from, or icons based on, Material Design icons by Google (licensed under the Apache License 2.0).

License

AxisCommunications/practical-react-components

ErrorLooks like something went wrong!

About

Topics

Resources

License

Code of conduct

Security policy

Uh oh!

Stars

Watchers

Forks

Releases 98

Packages 0

Uh oh!

Contributors 20

Uh oh!

Languages

Error
Looks like something went wrong!

Packages